Gulp 是什么？
Gulp 是 Grunt 的替代者。作为构建工具，Gulp 更具有语法简洁易懂的优势，所以学习成本更低。
利用 Gulp， 我们不仅可以对HTML、CSS（LESS|SASS）、JS（CoffeeScript）进行编译；还可以监听文件的变化，同时借助 livereloader 实时地刷新页面；甚至还可以对图片进行压缩优化。下面记录一下我的 Gulp 学习之旅 。
安装 Gulp
Gulp 需要 nodejs.org 运行环境，首先请确保你的机器上安装了 node.js。
安装全局 Gulp
npm i --global gulp安装本地（作为开发依赖项）Gulp
npm i --save-dev gulp创建 gulpfile.js 文件
var gulp = require('gulp');
gulp.task('default', function() {
// 将你的默认的任务代码放在这
console.log('hello world!');
});运行 Gulp
在终端运行：
gulpgulp 后不接参数，那么默认会执行 default 任务，所以上面的代码会在终端中输出 hello world!。
使用插件压缩脚本
gulp 依靠各种插件（plugin）实现常用功能。比方说我们要对所有的 *.js 文件进行压缩（借助 gulp-uglify 插件）
var gulp = require('gulp'),
uglify = require('gulp-uglify');
gulp.task('default', function() {
gulp.src('js/*.js')
.pipe(uglify())
.pipe(gulp.dest('build/js'))；
});重新在终端运行 gulp， Gulp 会对 js/ 目录下的所有 js文件进行压缩，然后输出到 build/js 目录。
给任务（Task）命名
上面我们定义了一个对 js 进行压缩的任务，并把它放在了默认的（default）任务下，其实我们最好把处理脚本的相关操作抽出来，当独作为一个任务（例如 scripts ）更为合理：
gulp.task('scripts', function () {
gulp.src('js/*.js')
.pipe(uglify())
.pipe(gulp.dest('build/js'));
});我们可以在终端运行指定的任务项，只需在 gulp 后面接上任务名参数：
gulp scripts监听文件的改变
我们可以借助 gulp-watch 插件 来监听文件的改变：
var gulp = require('gulp'),
uglify = require('gulp-uglify'),
watch = require('gulp-watch');
gulp.task('watch', function() {
gulp.watch('js/*.js', ['scripts']);
});这里我们定义了一个 watch 任务，监听 js/*.js 文件的改变， watch() 的第二个参数是文件发生改变之后的回调，这里表示，文件一旦发生改变，就会执行前面我们定义的 scripts 任务，重新对 js 文件进行压缩处理。
用Gulp来编译LESS
Gulp 不仅可以对 js 进行压缩处理，还可以编译 less/scss 文件，这一功能也是我们经常在项目中用到的。这里需要借助 gulp-less 插件：
var gulp = require('gulp'),
uglify = require('gulp-uglify'),
watch = require('gulp-watch'),
less = require('gulp-less');
gulp.task('styles', function () {
gulp.src('less/**/*.less')
.pipe(less())
.pipe(gulp.dest('css/'));
});使用Plumber来让Gulp保持运行
如果我们在编写代码的过程中，不小心代码写错了，存在语法错误，那么编译不会被通过，gulp 会在终端抛出异常，同时终止。这不是我们想要的，我们希望存在语法错误是，Gulp 能够给我们提示，并继续保持运行，而不是中断，这个时候就要借助 gulp-plumber 来帮我们做这个事：
gulp.task('styles', function () {
gulp.src('less/**/*.less')
.pipe(plumber())
.pipe(less())
.pipe(gulp.dest('css/'))
});注意： 我们要保证 plumber() 要放在其他操作前面，这样才能捕捉到错误异常。
实时更新（LiveReload）页面
我们期望代码更新后不仅能够重新编译代码，而且希望浏览器帮我们自己刷新网页，这个时候，我们就需要用到 gulp-livereload 的帮助了，同时我们需要安装 livereload 的Chrome插件。
gulp.task('styles', function () {
gulp.src('less/**/*.less')
.pipe(plumber())
.pipe(less())
.pipe(gulp.dest('css/'))
.pipe(livereload());
});注意： 与 plumber() 相反，我们要把 livereload() 放在操作的最后。
简单的进行图像压缩
我们可以借助 gulp-imagemin 对图片进行优化：
gulp.task('images', function () {
return gulp.src('src/images/*')
.pipe(imagemin())
.pipe(gulp.dest('dist/images'));
});自动补全浏览器前缀
我们还可以用 gulp-autoprefixer 对 CSS3 中的一些属性进行前缀的自动补全（例如 transition, transform 等 ）：
gulp.task('styles', function () {
gulp.src('less/**/*.less')
.pipe(plumber())
.pipe(less())
.pipe(prefixer('last 2 versions'))
.pipe(gulp.dest('css/'))
.pipe(livereload());
});prefixer() 的参数可参考 这里
最终的 gulpfile.js 配置文件
var gulp = require('gulp'),
uglify = require('gulp-uglify'),
watch = require('gulp-watch'),
less = require('gulp-less'),
plumber = require('gulp-plumber'),
livereload = require('gulp-livereload'),
prefixer = require('gulp-autoprefixer');
// Scripts Task
gulp.task('scripts', function () {
gulp.src('js/*.js')
.pipe(plumber())
.pipe(uglify())
.pipe(gulp.dest('build/js'))
.pipe(livereload());
});
// Styles Task
gulp.task('styles', function () {
gulp.src('less/**/*.less')
.pipe(plumber())
.pipe(less())
.pipe(prefixer('last 2 versions'))
.pipe(gulp.dest('css/'))
.pipe(livereload());
});
// HTML Task
gulp.task('html', function() {
gulp.src('*.html')
.pipe(livereload());
})
// Image Task
gulp.task('images', function () {
return gulp.src('src/images/*')
.pipe(imagemin())
.pipe(gulp.dest('dist/images'));
});
// Watch Task
gulp.task('watch', function() {
livereload.listen();
gulp.watch('js/*.js', ['scripts']);
gulp.watch('less/**/*.less', ['styles']);
gulp.watch('*.html', ['html']);
});
gulp.task('default', ['scripts', 'styles', 'watch']);总结
上面列出了一些日常开发中比较常用的几种功能，其他更多的功能可参考官方 plugin 库，根据个人需求对其功能继续扩展。
文章地址：http://blog.mcbird.cn/2015/08/28/learning-gulp/