前言
最近流行前端构建工具，苦于以前使用Grunt，代码很难阅读，如今出了Gulp，真是摆脱了痛苦。发现了一篇很好的Gulp英文教程，整理翻译给你们看看。css
为何使用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是如何作到的：android
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看得眼花缭乱了。ios
再打个比喻，Grunt的插件就像独立的工厂，这个工厂生成出来的产品打包封装好后再送到另外一个工厂去加工，使用了Gulp后实现了工厂的合并，全部东西都在一个工厂里完成了。如今是否对Gulp感兴趣了，那就开始使用Gulp吧！git
安装
首先咱们要全局安装一遍：github
|
1
|
$ npm install gulp -g
|
接着咱们要进去到项目的根目录再安装一遍（确保你根目录存在package.json文件）：正则表达式
|
1
|
$ npm install gulp --save-dev
|
—save-dev这个属性会将条目保存到你package.json的devDependencies里面npm
安装Gulp插件
咱们将要使用Gulp插件来完成咱们如下任务：json
- sass的编译（gulp-ruby-sass）
- 自动添加css前缀（gulp-autoprefixer）
- 压缩css（gulp-minify-css）
- js代码校验（gulp-jshint）
- 合并js文件（gulp-concat）
- 压缩js代码（gulp-uglify）
- 压缩图片（gulp-imagemin）
- 自动刷新页面（gulp-livereload）
- 图片缓存，只有图片替换了才压缩（gulp-cache）
- 更改提醒（gulp-notify）
- 清除文件（del）
安装这些插件须要运行以下命令：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/