Gulp入门教程

前言

最近流行前端构建工具,苦于之前使用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/

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值