前言

最近流行前端构建工具,苦于之前使用Grunt,代码很难阅读,现在出了Gulp,真是摆脱了痛苦。发现了一篇很好的Gulp英文教程,整理翻译给大家看看。

为什么使用Gulp

Gulp基于Node.js的前端构建工具,通过Gulp的插件可以实现前端代码的编译(sass、less)、压缩、测试;图片的压缩;浏览器自动刷新,还有许多强大的插件可以在这里查找。比起Grunt不仅配置简单而且更容易阅读和维护,我们可以做一个对比:

Grunt:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
sass: {
dist: {
options: {
style: 'expanded'
},
files: {
'dist/assets/css/main.css': 'src/styles/main.scss',
}
}
},
autoprefixer: {
dist: {
options: {
browsers: [
'last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'
]
},
src: 'dist/assets/css/main.css',
dest: 'dist/assets/css/main.css'
}
},
grunt.registerTask('styles', ['sass', 'autoprefixer']);

在Grunt里面,每个插件使用的方式相对独立,正如上面的代码通过sass插件将main.sass文件编译成main.css文件,接着autoprefixer插件再对编译好的main.css文件进行修改,最后覆盖main.css。那么覆盖文件就是多余的了,有没办法做到sass和autoprefixer一并处理完再生成main.css?我们来看看Gulp是如何做到的:

Gulp:

1
2
3
4
5
6
gulp.task('sass', function() {
return gulp.src('src/styles/main.scss')
.pipe(sass({ style: 'compressed' }))
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
.pipe(gulp.dest('dist/assets/css'))
});

使用Gulp我们只需要放一个路径,通过管道方式使用插件,最后生成文件,是不是有种jQuery的感觉。这种方式不仅提高效率而且一眼就看清了输入文件和输出文件,再也不用看gruntfile看得眼花缭乱了。

再打个比喻,Grunt的插件就像独立的工厂,这个工厂生成出来的产品打包封装好后再送到另一个工厂去加工,使用了Gulp后实现了工厂的合并,所有东西都在一个工厂里完成了。现在是否对Gulp感兴趣了,那就开始使用Gulp吧!

安装

首先我们要全局安装一遍:

1
$ npm install gulp -g

接着我们要进去到项目的根目录再安装一遍(确保你根目录存在package.json文件):

1
$ npm install gulp --save-dev

—save-dev这个属性会将条目保存到你package.json的devDependencies里面

安装Gulp插件

我们将要使用Gulp插件来完成我们以下任务:

安装这些插件需要运行如下命令:

1
$ npm install gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del --save-dev

上面是一些常用的插件,如果想要找更多的插件点击这里

加载插件

接着我们要创建一个gulpfile.js在根目录下,然后在里面加载插件:

1
2
3
4
5
6
7
8
9
10
11
12
13
var gulp = require('gulp'),
sass = require('gulp-ruby-sass'),
autoprefixer = require('gulp-autoprefixer'),
minifycss = require('gulp-minify-css'),
jshint = require('gulp-jshint'),
uglify = require('gulp-uglify'),
imagemin = require('gulp-imagemin'),
rename = require('gulp-rename'),
concat = require('gulp-concat'),
notify = require('gulp-notify'),
cache = require('gulp-cache'),
livereload = require('gulp-livereload'),
del = require('del');

Gulp的插件和Grunt有些许不一样,Grunt插件是为了更好的完成一项任务。就像Grunt的imagemin插件就利用了缓存来避免重复压缩,而Gulp要利用gulp-cache来完成,当然啦,不仅限定于缓存图片。

建立任务

编译sass、自动添加css前缀和压缩

首先我们编译sass,添加前缀,保存到我们指定的目录下面,还没结束,我们还要压缩,给文件添加.min后缀再输出压缩文件到指定目录,最后提醒任务完成了:

1
2
3
4
5
6
7
8
9
10
gulp.task('styles', function() {
return gulp.src('src/styles/main.scss')
.pipe(sass({ style: 'expanded' }))
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
.pipe(gulp.dest('dist/assets/css'))
.pipe(rename({suffix: '.min'}))
.pipe(minifycss())
.pipe(gulp.dest('dist/assets/css'))
.pipe(notify({ message: 'Styles task complete' }));
});

让我解释一下:

1
gulp.task('styles', function () {...});

gulp.task这个API用来创建任务,在命令行下可以输入$ gulp styles来执行上面的任务。

1
return gulp.src('src/styles/main.scss')

gulp.src这个API设置需要处理的文件的路径,可以是多个文件以数组的形式[main.scss, vender.scss],也可以是正则表达式/**/*.scss

1
.pipe(sass({ style: 'expanded' }))

我们使用.pipe()这个API将需要处理的文件导向sass插件,那些插件的用法可以在github上找到,为了方便大家查找我已经在上面列出来了。

1
.pipe(gulp.dest('dist/assets/css'));

gulp.dest()API设置生成文件的路径,一个任务可以有多个生成路径,一个可以输出未压缩的版本,另一个可以输出压缩后的版本。

为了更好的了解Gulp API,强烈建议看一下Gulp API文档,其实Gulp API就这么几个,没什么好可怕的。

js代码校验、合并和压缩

希望大家已经知道如何去创建一个任务了,接下来我们完成scripts的校验、合并和压缩的任务吧:

1
2
3
4
5
6
7
8
9
10
11
gulp.task('scripts', function() {
return gulp.src('src/scripts/**/*.js')
.pipe(jshint('.jshintrc'))
.pipe(jshint.reporter('default'))
.pipe(concat('main.js'))
.pipe(gulp.dest('dist/assets/js'))
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(gulp.dest('dist/assets/js'))
.pipe(notify({ message: 'Scripts task complete' }));
});

需要提醒的是我们要设置JSHint的reporter方式,上面使用的是default默认的,了解更多点击这里

压缩图片

1
2
3
4
5
6
gulp.task('images', function() {
return gulp.src('src/images/**/*')
.pipe(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true }))
.pipe(gulp.dest('dist/assets/img'))
.pipe(notify({ message: 'Images task complete' }));
});

这个任务使用imagemin插件把所有在src/images/目录以及其子目录下的所有图片(文件)进行压缩,我们可以进一步优化,利用缓存保存已经压缩过的图片,使用之前装过的gulp-cache插件,不过要修改一下上面的代码:

将这行代码:

1
.pipe(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true }))

修改成:

1
.pipe(cache(imagemin({ optimizationLevel: 5, progressive: true, interlaced: true })))

现在,只有新建或者修改过的图片才会被压缩了。

清除文件

在任务执行前,最好先清除之前生成的文件:

1
2
3
gulp.task('clean', function(cb) {
del(['dist/assets/css', 'dist/assets/js', 'dist/assets/img'], cb)
});

在这里没有必要使用Gulp插件了,可以使用NPM提供的插件。我们用一个回调函数(cb)确保在退出前完成任务。

设置默认任务(default)

我们在命令行下输入$ gulp执行的就是默认任务,现在我们为默认任务指定执行上面写好的三个任务:

1
2
3
gulp.task('default', ['clean'], function() {
gulp.start('styles', 'scripts', 'images');
});

在这个例子里面,clean任务执行完成了才会去运行其他的任务,在gulp.start()里的任务执行的顺序是不确定的,所以将要在它们之前执行的任务写在数组里面。

监听文件

为了监听文件的是否修改以便执行相应的任务,我们需要创建一个新的任务,然后利用gulp.watchAPI实现:

1
2
3
4
5
6
7
8
gulp.task('watch', function() {
// Watch .scss files
gulp.watch('src/styles/**/*.scss', ['styles']);
// Watch .js files
gulp.watch('src/scripts/**/*.js', ['scripts']);
// Watch image files
gulp.watch('src/images/**/*', ['images']);
});

我们将不同类型的文件分开处理,执行对应的数组里的任务。现在我们可以在命令行输入$ gulp watch执行监听任务,当.sass.js和图片修改时将执行对应的任务。

自动刷新页面

Gulp也可以实现当文件修改时自动刷新页面,我们要修改watch任务,配置LiveReload:

1
2
3
4
5
6
gulp.task('watch', function() {
// Create LiveReload server
livereload.listen();
// Watch any files in dist/, reload on change
gulp.watch(['dist/**']).on('change', livereload.changed);
});

要使这个能够工作,还需要在浏览器上安装LiveReload插件,除此之外还能这样做

所有任务放一起

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
/*!
* gulp
* $ npm install gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del --save-dev
*/
// Load plugins
var gulp = require('gulp'),
sass = require('gulp-ruby-sass'),
autoprefixer = require('gulp-autoprefixer'),
minifycss = require('gulp-minify-css'),
jshint = require('gulp-jshint'),
uglify = require('gulp-uglify'),
imagemin = require('gulp-imagemin'),
rename = require('gulp-rename'),
concat = require('gulp-concat'),
notify = require('gulp-notify'),
cache = require('gulp-cache'),
livereload = require('gulp-livereload'),
del = require('del');
// Styles
gulp.task('styles', function() {
return gulp.src('src/styles/main.scss')
.pipe(sass({ style: 'expanded', }))
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
.pipe(gulp.dest('dist/styles'))
.pipe(rename({ suffix: '.min' }))
.pipe(minifycss())
.pipe(gulp.dest('dist/styles'))
.pipe(notify({ message: 'Styles task complete' }));
});
// Scripts
gulp.task('scripts', function() {
return gulp.src('src/scripts/**/*.js')
.pipe(jshint('.jshintrc'))
.pipe(jshint.reporter('default'))
.pipe(concat('main.js'))
.pipe(gulp.dest('dist/scripts'))
.pipe(rename({ suffix: '.min' }))
.pipe(uglify())
.pipe(gulp.dest('dist/scripts'))
.pipe(notify({ message: 'Scripts task complete' }));
});
// Images
gulp.task('images', function() {
return gulp.src('src/images/**/*')
.pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
.pipe(gulp.dest('dist/images'))
.pipe(notify({ message: 'Images task complete' }));
});
// Clean
gulp.task('clean', function(cb) {
del(['dist/assets/css', 'dist/assets/js', 'dist/assets/img'], cb)
});
// Default task
gulp.task('default', ['clean'], function() {
gulp.start('styles', 'scripts', 'images');
});
// Watch
gulp.task('watch', function() {
// Watch .scss files
gulp.watch('src/styles/**/*.scss', ['styles']);
// Watch .js files
gulp.watch('src/scripts/**/*.js', ['scripts']);
// Watch image files
gulp.watch('src/images/**/*', ['images']);
// Create LiveReload server
livereload.listen();
// Watch any files in dist/, reload on change
gulp.watch(['dist/**']).on('change', livereload.changed);
});

gist上有源码,并且附上Grunt的实现作为对比。

参考链接:http://markgoodyear.com/2014/01/getting-started-with-gulp/

文章目录
  1. 1. 前言
  2. 2. 为什么使用Gulp
    1. 2.1. Grunt:
    2. 2.2. Gulp:
  3. 3. 安装
  4. 4. 安装Gulp插件
  5. 5. 加载插件
  6. 6. 建立任务
    1. 6.1. 编译sass、自动添加css前缀和压缩
    2. 6.2. js代码校验、合并和压缩
    3. 6.3. 压缩图片
    4. 6.4. 清除文件
    5. 6.5. 设置默认任务(default)
    6. 6.6. 监听文件
    7. 6.7. 自动刷新页面
    8. 6.8. 所有任务放一起