Gulp 入门

Gulp 是什么？

Gulp 是 Grunt 的替代者。做为构建工具，Gulp 更具备语法简洁易懂的优点，因此学习成本更低。
利用 Gulp， 咱们不只能够对HTML、CSS（LESS|SASS）、JS（CoffeeScript）进行编译；还能够监听文件的变化，同时借助 livereloader 实时地刷新页面；甚至还能够对图片进行压缩优化。下面记录一下个人 Gulp 学习之旅 。

安装 Gulp

Gulp 须要 nodejs.org 运行环境，首先请确保你的机器上安装了 node.js。

1. 安装全局 Gulp

npm i --global gulp

1. 安装本地（做为开发依赖项）Gulp

npm i --save-dev gulp

1. 建立 gulpfile.js 文件

var gulp = require('gulp');

gulp.task('default', function() {
  // 将你的默认的任务代码放在这
  console.log('hello world!');
});

1. 运行 Gulp
   在终端运行：

gulp

gulp 后不接参数，那么默认会执行 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/