Gulp 入门

MockingBird

gulp logo

Gulp 是什么?

GulpGrunt 的替代者。作为构建工具,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/

阅读 3.6k

MockingBird 博客
用作博客,记录学习笔记,收藏有价值的文章

_

5.7k 声望
701 粉丝
0 条评论

_

5.7k 声望
701 粉丝
宣传栏