Gulp 快速入门

所属：Tutorials, Gulp

Gulp 是什么？

来自于官方的解释：The streaming build system

简单来理解就是：Gulp 是基于 Node.js 的构建工具，处理速度很快。

Gulp API

  • Gulp.task(name, fn) 用来定义任务的
  • Gulp.run(tasks…) 从3.5开始弃用，将在4.0中删除。https://github.com/gulpjs/gulp/blob/master/index.js#L16
  • Gulp.src(glob) 用来读取文件
  • Gulp.dest(folder) 用来写入文件
  • Gulp.watch(glob, fn) 用来监听文件是否改动过

快速上手

安装 Gulp

1
(sudo) npm install -g gulp

使用 Gulp

编写 Gulpfile.js 和 package.json

1
2
cd <你的项目>
npm install gulp --save-dev

--save-dev 表示会将 gulp 更新到 package.json 的 devDependencies 中去。

gulpfile.js

1
2
3
4
5
6
// 引入Gulp
var gulp = require('gulp');
// 定义任务
gulp.task('demo', function(){
    console.log('Hello Gulp...');
});

然后在终端则运行 gulp demo, 则会显示 “Hello Gulp…”。

Gulp 实例

假设有个需求，在js文件里有a.js、b.js两个脚本文件，现在想要将它们合并、校验、压缩，并生成一个新的 c.min.js 文件。

思路大致是这样的：

  1. 找到 js 文件
  2. 校验 js 语法是否有警告、错误
  3. 合并 a.js 和 b.js 文件
  4. 压缩
  5. 输出到指定文件夹

目录结构

1
2
3
4
5
6
demo
 - js
    - a.js
    - b.js
 - dist    // 压缩后的目录
    - c.min.js

安装相关依赖包

1
npm install gulp gulp-jshint gulp-uglify gulp-concat gulp-rename --save-dev

gulpfile.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var gulp = require('gulp');
var jshint = require('gulp-jshint');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
gulp.task('default', function(){
    return gulp.src('./js/*.js')
           .pipe(jshint())
           .pipe(jshint.reporter('default'))
           .pipe(concat('c.js'))
           .pipe(uglify())
           .pipe(rename({suffix: '.min'}))
           .pipe(gulp.dest('./dist/js'));
});

在命令行了直接 gulp 或者 gulp default 即可。

参考资料