Gulp入门基础教程
前言最近流行前端构建工具，苦于之前使用Grunt，代码很难阅读，现在出了Gulp，
真是摆脱了痛苦。发现了一篇很好的Gulp英文教程，整理翻译给大家看看。
为什么使用GulpGulp基于Node.js的前端构建工具，通过Gulp的插件可以实现前端
代码的编译（sass、less）、压缩、测试；图片的压缩；浏览器自动刷新，还有许多
强大的插件可以在这里查找。比起Grunt不仅配置简单而且更容易阅读和维护，我们
可以做一个对比：
Grunt:
sass: { dist: { options: { style: 'expanded' }, files: { 'dist/assets/css/main.css': 'src/styles/main.scss', } } }, autoprefixer: { dist: { options: { browsers: [ 'last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4' ] }, src: 'dist/assets/css/main.css', dest: 'dist/assets/css/main.css' } }, grunt.registerTask('styles', ['sass', 'autoprefixer']);
在Grunt里面，每个插件使用的方式相对独立，正如上面的代码通过sass插件
将main.sass文件编译成main.css文件，接着autoprefixer插件再对编译好的
main.css文件进行修改，最后覆盖main.css。那么覆盖文件就是多余的了，有没
办法做到sass和autoprefixer一并处理完再生成main.css？我们来看看Gulp是
如何做到的：
Gulp：
gulp.task('sass', function() {
return gulp.src('src/styles/main.scss')
.pipe(sass({ style: 'compressed' }))
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
.pipe(gulp.dest('dist/assets/css'))
});
使用Gulp我们只需要放一个路径，通过管道方式使用插件，最后生成文件，是不是
有种jQuery的感觉。这种方式不仅提高效率而且一眼就看清了输入文件和输出
文件，再也不用看gruntfile看得眼花缭乱了。
再打个比喻，Grunt的插件就像独立的工厂，这个工厂生成出来的产品打包封装好后
再送到另一个工厂去加工，使用了Gulp后实现了工厂的合并，所有东西都在一个
工厂里完成了。现在是否对Gulp感兴趣了，那就开始使用Gulp吧！
安装
首先我们要全局安装一遍：
- $ npm install gulp -g
接着我们要进去到项目的根目录再安装一遍（确保你根目录存在package.json文件）：
- $ npm install gulp --save-dev
—save-dev这个属性会将条目保存到你package.json的devDependencies里面
安装Gulp插件
我们将要使用Gulp插件来完成我们以下任务：
- sass的编译（gulp-ruby-sass）
- 自动添加css前缀（gulp-autoprefixer）
- 压缩css（gulp-minify-css）
- js代码校验（gulp-jshint）
- 合并js文件（gulp-concat）
- 压缩js代码（gulp-uglify）
- 压缩图片（gulp-imagemin）
- 自动刷新页面（gulp-livereload）
- 图片缓存，只有图片替换了才压缩（gulp-cache）
- 更改提醒（gulp-notify）
- 清除文件（del）
安装这些插件需要运行如下命令：
- $ npm install gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del --save-dev
上面是一些常用的插件，如果想要找更多的插件点击这里
加载插件
接着我们要创建一个gulpfile.js在根目录下，然后在里面加载插件：
1 var gulp = require('gulp'), 2 sass = require('gulp-ruby-sass'), 3 autoprefixer = require('gulp-autoprefixer'), 4 minifycss = require('gulp-minify-css'), 5 jshint = require('gulp-jshint'), 6 uglify = require('gulp-uglify'), 7 imagemin = require('gulp-imagemin'), 8 rename = require('gulp-rename'), 9 concat = require('gulp-concat'), 10 notify = require('gulp-notify'), 11 cache = require('gulp-cache'), 12 livereload = require('gulp-livereload'), 13 del = require('del');
Gulp的插件和Grunt有些许不一样，Grunt插件是为了更好的完成一项任务。
就像Grunt的imagemin插件就利用了缓存来避免重复压缩，而Gulp要利用
gulp-cache来完成，当然啦，不仅限定于缓存图片。
建立任务
编译sass、自动添加css前缀和压缩
首先我们编译sass，添加前缀，保存到我们指定的目录下面，还没结束，我们还
要压缩，给文件添加.min后缀再输出压缩文件到指定目录，最后提醒任务完成了：
1 gulp.task('styles', function() { 2 return gulp.src('src/styles/main.scss') 3 .pipe(sass({ style: 'expanded' })) 4 .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4')) 5 .pipe(gulp.dest('dist/assets/css')) 6 .pipe(rename({suffix: '.min'})) 7 .pipe(minifycss()) 8 .pipe(gulp.dest('dist/assets/css')) 9 .pipe(notify({ message: 'Styles task complete' })); 10 });
让我解释一下：
gulp.task这个API用来创建任务，在命令行下可以输入$ gulp styles来执行上面
的任务。
gulp.src这个API设置需要处理的文件的路径，可以是多个文件以数组的
形式[main.scss, vender.scss]，也可以是正则表达式/**/*.scss。
我们使用.pipe()这个API将需要处理的文件导向sass插件，那些插件的用法
可以在github上找到，为了方便大家查找我已经在上面列出来了。
.pipe(gulp.dest('dist/assets/css'));
gulp.dest()API设置生成文件的路径，一个任务可以有多个生成路径，一个可以
输出未压缩的版本，另一个可以输出压缩后的版本。
为了更好的了解Gulp API，强烈建议看一下Gulp API文档，其实Gulp API就这么
几个，没什么好可怕的。
js代码校验、合并和压缩
希望大家已经知道如何去创建一个任务了，接下来我们完成scripts的校验、合并和
压缩的任务吧：
1 gulp.task('scripts', function() { 2 return gulp.src('src/scripts/**/*.js') 3 .pipe(jshint('.jshintrc')) 4 .pipe(jshint.reporter('default')) 5 .pipe(concat('main.js')) 6 .pipe(gulp.dest('dist/assets/js')) 7 .pipe(rename({suffix: '.min'})) 8 .pipe(uglify()) 9 .pipe(gulp.dest('dist/assets/js')) 10 .pipe(notify({ message: 'Scripts task complete' })); 11 });
需要提醒的是我们要设置JSHint的reporter方式，上面使用的是default默认的，
了解更多点击这里。
压缩图片
gulp.task('images', function() {
return gulp.src('src/images/**/*')
.pipe(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true }))
.pipe(gulp.dest('dist/assets/img'))
.pipe(notify({ message: 'Images task complete' }));
});
这个任务使用imagemin插件把所有在src/images/目录以及其子目录下的所有图
片（文件）进行压缩，我们可以进一步优化，利用缓存保存已经压缩过的图片，
使用之前装过的gulp-cache插件，不过要修改一下上面的代码：
将这行代码:.pipe(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true }))
修改成:
现在，只有新建或者修改过的图片才会被压缩了。
清除文件
在任务执行前，最好先清除之前生成的文件：
gulp.task('clean', function(cb) {
del(['dist/assets/css', 'dist/assets/js', 'dist/assets/img'], cb)
});
在这里没有必要使用Gulp插件了，可以使用NPM提供的插件。我们用一个回调
函数（cb）确保在退出前完成任务。
设置默认任务（default）
我们在命令行下输入$ gulp执行的就是默认任务，现在我们为默认任务指定执行上面
写好的三个任务：
1 gulp.task('default', ['clean'], function() { 2 gulp.start('styles', 'scripts', 'images'); 3 });
在这个例子里面，clean任务执行完成了才会去运行其他的任务，在gulp.start()里
的任务执行的顺序是不确定的，所以将要在它们之前执行的任务写在数组里面。
监听文件
为了监听文件的是否修改以便执行相应的任务，我们需要创建一个新的任务，然后
利用gulp.watchAPI实现：
1 gulp.task('watch', function() { 2 // Watch .scss files 3 gulp.watch('src/styles/**/*.scss', ['styles']); 4 // Watch .js files 5 gulp.watch('src/scripts/**/*.js', ['scripts']); 6 // Watch image files 7 gulp.watch('src/images/**/*', ['images']); 8 });
我们将不同类型的文件分开处理，执行对应的数组里的任务。现在我们可以在命令
行输入$ gulp watch执行监听任务，当.sass、.js和图片修改时将执行对应的任务。
自动刷新页面
Gulp也可以实现当文件修改时自动刷新页面，我们要修改watch任务，
配置LiveReload：
gulp.task('watch', function() {
// Create LiveReload server
livereload.listen();
// Watch any files in dist/, reload on change
gulp.watch(['dist/**']).on('change', livereload.changed);
});
要使这个能够工作，还需要在浏览器上安装LiveReload插件，除此之外还能这样做：页面中添加一段脚本
所有任务放一起
1 /*! 2 * gulp 3 * $ npm install gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del --save-dev 4 */ 5 // Load plugins 6 var gulp = require('gulp'), 7 sass = require('gulp-ruby-sass'), 8 autoprefixer = require('gulp-autoprefixer'), 9 minifycss = require('gulp-minify-css'), 10 jshint = require('gulp-jshint'), 11 uglify = require('gulp-uglify'), 12 imagemin = require('gulp-imagemin'), 13 rename = require('gulp-rename'), 14 concat = require('gulp-concat'), 15 notify = require('gulp-notify'), 16 cache = require('gulp-cache'), 17 livereload = require('gulp-livereload'), 18 del = require('del'); 19 // Styles 20 gulp.task('styles', function() { 21 return gulp.src('src/styles/main.scss') 22 .pipe(sass({ style: 'expanded', })) 23 .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4')) 24 .pipe(gulp.dest('dist/styles')) 25 .pipe(rename({ suffix: '.min' })) 26 .pipe(minifycss()) 27 .pipe(gulp.dest('dist/styles')) 28 .pipe(notify({ message: 'Styles task complete' })); 29 }); 30 // Scripts 31 gulp.task('scripts', function() { 32 return gulp.src('src/scripts/**/*.js') 33 .pipe(jshint('.jshintrc')) 34 .pipe(jshint.reporter('default')) 35 .pipe(concat('main.js')) 36 .pipe(gulp.dest('dist/scripts')) 37 .pipe(rename({ suffix: '.min' })) 38 .pipe(uglify()) 39 .pipe(gulp.dest('dist/scripts')) 40 .pipe(notify({ message: 'Scripts task complete' })); 41 }); 42 // Images 43 gulp.task('images', function() { 44 return gulp.src('src/images/**/*') 45 .pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true }))) 46 .pipe(gulp.dest('dist/images')) 47 .pipe(notify({ message: 'Images task complete' })); 48 }); 49 // Clean 50 gulp.task('clean', function(cb) { 51 del(['dist/assets/css', 'dist/assets/js', 'dist/assets/img'], cb) 52 }); 53 // Default task 54 gulp.task('default', ['clean'], function() { 55 gulp.start('styles', 'scripts', 'images'); 56 }); 57 // Watch 58 gulp.task('watch', function() { 59 // Watch .scss files 60 gulp.watch('src/styles/**/*.scss', ['styles']); 61 // Watch .js files 62 gulp.watch('src/scripts/**/*.js', ['scripts']); 63 // Watch image files 64 gulp.watch('src/images/**/*', ['images']); 65 // Create LiveReload server 66 livereload.listen(); 67 // Watch any files in dist/, reload on change 68 gulp.watch(['dist/**']).on('change', livereload.changed); 69 });
在gist上有源码，并且附上Grunt的实现作为对比。
参考链接：http://markgoodyear.com/2014/01/getting-started-with-gulp/