By

文章目录
  1. 1. 安装
  2. 2. 编写 gulpfile.coffee
  3. 3. 编译 coffee
  4. 4. 压缩 js
  5. 5. 编译 less
  6. 6. 处理 css3 前缀
  7. 7. 压缩 css
  8. 8. 自动生成文件版本
  9. 9. 一个完整的示例

Gulp 是用 nodejs 写的一个前端构建工具，我现在主要拿来自动编译 coffee、less 以及压缩图片、同步文件、清理多余文件等工作。 gulp 使用 stream 方式处理内容，主要使用的几个办置方法如下:

  1. gulp.src: 来源
  2. gulp.dest: 目标
  3. gulp.pipe: 管道
  4. gulp.watch: 监视文件系统，文件改动时自动处理
  5. gulp.task: 任务

安装

首先需要在系统里面安装全局的 gulp 命令。

1
sudo npm install -g gulp

然后在项目的根目录下新建 package.json 文件。

1
npm init .

安装 gulp 包。

1
npm install gulp --save-dev

编写 gulpfile.coffee

默认情况下 gulp 运行的时候会引入项目目录下的 gulpfile.js 文件，如果跟我一样喜欢用 coffee 来写的话可以先安装一下 coffee-script。

1
npm install coffee-script --save-dev

然后先编写一个 gulpfile.js 内容如下:

1
2
3
4
// 注册 coffee 脚本类型
require('coffee-script').register();
// 载入 coffee 版本的 gulpfile 文件
require('./gulpfile.coffee');

这样再在 gulpfile.coffee 文件中编写具体的逻辑就可以了。

例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
gulp = require("gulp")
less = require("gulp-less")
gutil = require "gulp-util" # 一个工具库
plumber = require "gulp-plumber" # 自动处理全部错误信息防止因为错误而导致 watch 不正常工作
changed = require "gulp-changed" # 只编译修改过的文件，加快速度

# 错误处理
handleError = (err) ->
  gutil.beep() # 发出滴声提示
  gutil.log err.toString() # 输出错误信息

less_src = "assets/css/*.less"
less_dest = "assets/css"

gulp.task "less", ->
  gulp.src less_src
    .pipe plumber(errorHandler: handleError)
    # 只编译修改过的文件
    .pipe changed(less_dest,
      extension: '.css'
    )
    # 编译less
    .pipe less()
    # 输出到文件
    .pipe gulp.dest(less_dest)

gulp.task "default", ->
  gulp.watch [less_src], ["less"] # 监视文件，修改时自动编译

下面的脚本示例全部使用 coffee，会简单的给出一些常用插件的示例，具体的用法请参考插件文档。

编译 coffee

编译 coffee 文件需要安装 gulp-coffee 插件。

1
npm install gulp-coffee --save-dev

然后编写 gulpfile.coffee 文件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
gulp = require("gulp")
coffee = require("gulp-coffee") # 编译coffee
gutil = require "gulp-util" # 一个工具库
plumber = require "gulp-plumber" # 自动处理全部错误信息防止因为错误而导致 watch 不正常工作

# 错误处理
handleError = (err) ->
  gutil.beep()
  gutil.log err.toString()

# 各种资源的路径
coffee_src = "assets/**/*.coffee"
coffee_dest = "assets"

# 生成 js
gulp.task "coffee", ->
  gulp.src coffee_src
    .pipe plumber(errorHandler: handleError)
    .pipe coffee() # 编译 coffee
    .pipe gulp.dest(coffee_dest)

gulp.task "default", ["coffee"]

然后执行 gulp 命令就会生成 assets 目录下与 coffee 对应的 js 文件，可以结合 watch 在 coffee 修改时自动编译成 js。

压缩 js

压缩 js 我使用的是 gulp-uglify，我通常结合在 coffee 编译 pipe 后面自动压缩。安装命令如下:

1
npm install gulp-uglify --save-dev

示例:

1
2
3
4
5
6
7
# 这里只显示主要的代码，其它部分参数上面的
uglify = require("gulp-uglify") # 压缩js

gulp.task "uglify", ->
  gulp.src js_src
    .pipe uglify() # 压缩
    .pipe gulp.dest(js_dest)

编译 less

安装 gulp-less

1
npm install gulp-less --save-dev

示例:

1
2
3
4
5
6
less = require("gulp-less") # less 编译

gulp.task "less", ->
  gulp.src less_src
    .pipe less()
    .pipe gulp.dest(less_dest)

处理 css3 前缀

css3 前缀处理我用的是 less-plugin-autoprefix 这个 less 的插件，会自动根据 browsers 设置补全 css3 的前缀，在样式里面只要写 w3c 标准用法就可以。

1
npm install less-plugin-autoprefix --save-dev

示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
less = require("gulp-less") # less 编译

# 自动加上 css3 前缀
LessPluginAutoPrefix = require("less-plugin-autoprefix")

# 自动加上 css 前缀
autoprefix = new LessPluginAutoPrefix(browsers: [
  "ie >= 8"
  "ie_mob >= 10"
  "ff >= 26"
  "chrome >= 30"
  "safari >= 6"
  "opera >= 23"
  "ios >= 5"
  "android >= 2.3"
  "bb >= 10"
])

gulp.task "less", ->
  gulp.src less_src
    .pipe less(
      plugins: [autoprefix] # 自动加前缀
    )
    .pipe gulp.dest(less_dest)

压缩 css

安装 less-plugin-clean-css 插件

1
2
3
4
5
6
7
8
9
LessPluginCleanCSS = require("less-plugin-clean-css")
cleancss = new LessPluginCleanCSS(advanced: true)

gulp.task "less", ->
  gulp.src less_src
    .pipe less(
      plugins: [cleancss] # 自动加前缀
    )
    .pipe gulp.dest(less_dest)

自动生成文件版本

安装 gulp-rev 这个插件，这个插件会对静态文件生成 hash 回到文件名的后面，然后会一起生成一个 manifest.json 文件，里面包含对应的关系。然后可以通过程序读取这个文件的内容，在模板里面输出对应的带 hash 文件路径，每次更改后会自动生成新的文件，这样能有效的解决浏览器的缓存问题。

1
2
3
4
5
6
7
8
# 生成带 hash 版本的资源文件
gulp.task "rev", ['coffee','less'], ->
  gulp.src [public_src]
    .pipe plumber(errorHandler: handleError)
    .pipe rev()
    .pipe gulp.dest(public_dest)
    .pipe rev.manifest() # 生成 manifest 文件
    .pipe gulp.dest(public_dest)

一个完整的示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
gulp = require("gulp")
coffee = require("gulp-coffee") # 编译coffee
uglify = require("gulp-uglify") # 压缩js
less = require("gulp-less") # 编译 less
gulpFilter = require 'gulp-filter' # 过滤文件
override = require 'gulp-rev-css-url' # 修正 css 文件里面的图片路径
clean = require "gulp-clean" # 清除目录或文件
rev = require "gulp-rev" # 生成版本 hash 的静态文件
gutil = require "gulp-util" # 一个工具库
plumber = require "gulp-plumber" # 自动处理全部错误信息防止因为错误而导致 watch 不正常工作
changed = require "gulp-changed" # 只编译修改过的文件，加快速度


# 压缩css
LessPluginCleanCSS = require("less-plugin-clean-css")
cleancss = new LessPluginCleanCSS(advanced: true)
# 自动加上 css3 前缀
LessPluginAutoPrefix = require("less-plugin-autoprefix")

# 自动加上css前缀
autoprefix = new LessPluginAutoPrefix(browsers: [
  "ie >= 8"
  "ie_mob >= 10"
  "ff >= 26"
  "chrome >= 30"
  "safari >= 6"
  "opera >= 23"
  "ios >= 5"
  "android >= 2.3"
  "bb >= 10"
])

# 各种资源的原始路径
public_src = "gulp_src/Public/**/*"
public_dest = "Public"

# 错误处理
handleError = (err) ->
  gutil.beep()
  gutil.log err.toString()

# 清除 rev 目标
gulp.task "clean", ->
  clean_src = [
    public_dest + "/js/**/*.js"
    public_dest + "/css/**/*.css"
    public_dest + "/img"
    public_dest + "/fonts/**/*"
    public_dest + "/rev-manifest.json"
  ]
  gulp.src clean_src
    .pipe clean()

# coffee 资源路径
coffee_src = "gulp_src/Public/js/**/*.coffee"
coffee_dest = "gulp_src/Public/js"

# 生成 js 并压缩
gulp.task "coffee", ->
  gulp.src coffee_src
    .pipe plumber(errorHandler: handleError)
    # 只编译修改过的 coffee
    .pipe changed(coffee_dest,
      extension: '.js'
    )
    .pipe coffee() # 编译 coffee
    .pipe uglify() # 压缩
    .pipe gulp.dest(coffee_dest)

less_src = "gulp_src/Public/css/**/*.less"
less_dest = "gulp_src/Public/css"
gulp.task "less", ->
  gulp.src less_src
    .pipe plumber(errorHandler: handleError)
    # 只编译修改过的 less
    .pipe changed(less_dest,
      extension: '.css'
    )
    .pipe less(
      plugins: [autoprefix,cleancss]
    )
    .pipe gulp.dest(less_dest)

# 生成带 hash 版本的资源文件
gulp.task "rev", ['coffee','less'], ->
  # 过滤器
  publicFilter = gulpFilter [
    'js/**/*.js'
    'css/**/*.css'
    'img/**/*'
    'fonts/**/*'
  ]
  gulp.src [public_src]
    .pipe plumber(errorHandler: handleError)
    .pipe publicFilter
    .pipe rev()
    .pipe override() # 重写 css 文件里面对应的文件的版本
    .pipe gulp.dest(public_dest)
    .pipe rev.manifest() # 生成 manifest 文件
    .pipe gulp.dest(public_dest)
    .pipe publicFilter.restore()

gulp.task "default", ->
  gulp.watch [coffee_src,less_src], ["rev"]
文章目录
  1. 1. 安装
  2. 2. 编写 gulpfile.coffee
  3. 3. 编译 coffee
  4. 4. 压缩 js
  5. 5. 编译 less
  6. 6. 处理 css3 前缀
  7. 7. 压缩 css
  8. 8. 自动生成文件版本
  9. 9. 一个完整的示例