gulp打包工具指南

观奇笔记 2018-03-01

“ 这是我接触到的第一个打包工具，现在和大家分享一下。”

我写这篇博客的目的只是为了帮助那些还不会gulp的人能够完整的使用gulp这个工具来协助你完成web开发！

我希望这篇博客可以帮助你，那样我才会快乐!

1.gulp简介。

gulp是一款自动化构建工具,由外国人开发,可以增强你的工作流程!

2.gulp作用。

易于使用

通过代码优于配置的策略，Gulp 让简单的任务简单，复杂的任务可管理。

构建快速

利用 Node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作。

插件高质

Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作。

易于学习

通过最少的 API，掌握 Gulp 毫不费力，构建工作尽在掌握：如同一系列流管道。

1.gulp安装。

在安装之前,你需要新建一个文件夹,但是名字不能为gulp。

首先，你需要运行以下命令：

$ npm init

这是让npm初始化一下,一路按回车。

这时,你的根目录下就有了package.json这样一个配置文件！

然后，你在安装一下gulp：

$ npm install gulp --save-dev

这条命令是让gulp保存在根目录下，并且作为扩展工具。

最后,你查看一下gulp的版本号,如果出来,就说明成功了：

123	$ glup -v[20:11:34] CLI version 3.9.1[20:11:34] Local version 3.9.1

至此,便成功的安装好了,你现在激动不？好戏还在后面！

2.gulp案例。

接下来,就由我给大家做一个案例,如何使用gulp这款工具。

首先,我们在根目录下新建一个文件夹,比如src,在它下面又有img,css,js,index.html;

然后,开始下载必备的gulp包,这里有：

1234567891011"browser-sync": "^2.18.13","gulp": "^3.9.1","gulp-autoprefixer": "^4.0.0","gulp-concat": "^2.6.1","gulp-concat-css": "^2.3.0","gulp-csscomb": "^3.0.8","gulp-htmlmin": "^3.0.0","gulp-imagemin": "^3.3.0","gulp-less": "^3.3.2","gulp-uglifycss": "^1.0.8","gulp-uglyfly": "^1.4.2"

运行此条命令可以下载以上这些包：

$ npm install <你要下载的包名> --save-dev

下载完以后,你需要到配置文件package.json中查看也没有添加到devDependencies中,如果有,就说明成功了！

接着需用建立一个名为gulpfile.js的文件,然后输入以下命令：

//这些主要是引刚才下载的包var gulp = require('gulp');var less = require('gulp-less');var uglifycss = require('gulp-uglifycss');var autoprefixer = require('gulp-autoprefixer');var csscomb = require('gulp-csscomb');var concat = require('gulp-concat');var uglyfly = require('gulp-uglyfly');var img = require('gulp-imagemin');var htmlmin = require('gulp-htmlmin');var browserSync = require('browser-sync').create();//接下来就是建立任务：//这个任务是把less编译成cssgulp.task('style',function(){	gulp.src(['src/css/*.less','!src/css/_*.less'])    //入口文件  *在css下面以.less所有文件编译	.pipe(less())	.pipe(autoprefixer({	browsers: ['Android 2.3',	'Android >= 4',	'Chrome >= 20',	'Firefox >= 24', // Firefox 24 is the latest ESR 	'Explorer >= 8',	'iOS >= 6',	'Opera >= 12',	'Safari >= 6'],	cascade: false}))	.pipe(csscomb())	.pipe(uglifycss())				      //less编译	.pipe(gulp.dest('dest/css'))  //出口文件});//这个任务是把所有的js文件合并成一个名为main.js的文件gulp.task('script',function(){	gulp.src('src/js/*.js')	.pipe(concat('main.js'))	.pipe(uglyfly())	.pipe(gulp.dest('dest/js'))});//这个任务是把图片复制,压缩gulp.task('img',function(){	gulp.src('src/img/*.*')	.pipe(img())	.pipe(gulp.dest('dest/img'))});//这个任务是把所有的html文件压缩gulp.task('htmlmin',function(){	gulp.src('src/*.html')	.pipe(htmlmin({	  	collapseWhitespace: true,	  	removeComments: true	}))	.pipe(gulp.dest('dest'))});//这个任务就是游览器热更新var reload = browserSync.reload;gulp.task('server',function(){	browserSync.init({		server: {			baseDir: "dest"		}	});	gulp.watch('src/*.html',['htmlmin']).on("change",reload);	gulp.watch('src/js/*.js',['script']).on("change",reload);	gulp.watch('src/css/*.less',['style']).on("change",reload);	gulp.watch('src/img/*.*',['img']).on("change",reload);})

最后大功告成！