使用gulp简化你的工作

前言

构建工具的产生,极大地简化了我们的开发流程,让我们一起来看看在没有这些构建工具出现之前,我们的工作场景:写好js、css,合并压缩文件,改名,修改版本号,发布线上。等到需要修改一个功能的时候,重复上面的步骤。甚至如果使用了sass之类的来写样式的话,还得把sass转换成css。我们会发现有很多重复性的工作,对于程序员这种懒人来说是非常难受的,所以构建工具应运而生。

与grunt的区别

grunt也是一个著名的构建工具,并且拥有众多的粉丝,那么,gulp与grunt有啥区别呢?主要的区别点在于他们的实现方式上,grunt在处理任务的时候是使用I/O生成临时文件来处理任务,而gulp是使用类似于工作流的形式将中间的任务存储于内存之中来实现,从这里看出,利用内存的gulp显然在速度上会比频繁操作I/O的grunt速度快些。

gulp初体验

首先,当然是安装啦,由于gulp是基于node的,所以可以很轻松地利用npm进行安装,在这里需要注意,我们不仅需要全局-g安装同时也需要在项目中-save-dev安装,全局安装是因为我们需要用到gulp命令,而项目安装是因为我们需要引用到gulp来建立任务。
安装好后,我们需要在项目根目录中建立gulpfile.js来设立我们的gulp工作流。然后在gulpfile.js里建立我们的helloworld:

1
2
3
4
5
var gulp = require('gulp');

gulp.task('default',function(){
console.log('helloworld');
});

在项目根目录下运行gulp就会出现helloworld了。

gulp常用语法

task

task主要就是创建你的自动化任务,第一个参数是任务名,第二个参数为可选参数,这个任务所依赖的其他任务,第三个参数为具体任务流程。
首先,任务名的作用是什么,人物名是任务的唯一标示符,当你希望运行gulp任务的时候,你都需要使用:

1
gulp 任务名

你一定很奇怪,刚才实现helloworld的时候我们直接使用gulp就好了,并没有使用任务名,这是因为gulp的默认任务名是”default”,如果你定义了”default”任务的时候,当你使用gulp命令的时候默认调用default任务。
第二个参数为依赖任务,如果有需要提前执行的任务,那么就可以在这边定义了:

1
2
3
4
5
6
7
gulp.task('first',function(){
console.log('first');
});

gulp.task('second',['first'],function(){
console.log('second');
});

当我们运行gulp second的时候,是会先执行first任务的。当然,依赖是一个数组,可以包含几个依赖任务。

src

src主要是定位我们需要监听或者改变的文件位置,可以使用精确匹配,也可以使用模糊匹配,可以看下下面的举例:

1
2
3
4
js/app.js 精确匹配文件
js/.js 仅匹配js目录下的所有后缀为.js的文件
js//.js 匹配js目录及其子目录下所有后缀为.js的文件
!js/app.js 从匹配结果中排除js/app.js,这种方法在你想要匹配除了特殊文件之外的所有文件时非常管用

dest

定义输出的路径

watch

监听文件的改变,执行预定义的任务,可以看下面的一个例子:

1
2
3
4
5
6
7
gulp.task('server',function(){
console.log('test');
});

gulp.task('default',function(){
gulp.watch('js/*.js',['server']);
});

这里就是监听js目录下所有js文件的变动,如果变动了,就执行依赖任务server,当然依赖任务可以用执行函数来代替。

gulp常见插件

gulp自从面世以来已经有了上千个插件,这里主要挑一些常用的对于css处理的插件进行介绍。

gulp-ruby-sass

很显然,这是一个将sass转换成css的插件,从此再也不用其他第三方插件进行转化了。

gulp-autoprefixer

这个属于postCss中的一个,堪称神器,当我们使用css3属性的时候为了兼容各类浏览器而需要使用不同的前缀,如:

1
2
3
display:-webkit-flex;
display:-ms-flexbox;
display:flex;

然后当我们使用了autoprefixer以后,我们可以按照往常一样正常写css就可以了,如:

1
display : flex;

就可以了,autoprefixer会自动根据Can I use的规则来自动实现前缀,简直方便。

gulp-minify-css

压缩css的插件

browser-sync

当我们每次更新页面内容想要查看更新的时候都需要按F5进行刷新页面,browser-sync让我们告别了F5,直接监听页面变化实时刷新页面,节省了我们不少的时间。

结语

当然,这里介绍的插件只是冰山一角,gulp还有更多更多神奇的插件大大加快你的开发效率,将那些重复性的劳动用机器代替,简单而且不易出错,下面列出自己针对css的自动化任务的处理:

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
var gulp = require('gulp'),
sass = require('gulp-ruby-sass'),
autoprefixer = require('gulp-autoprefixer'),
rename = require('gulp-rename'),
livereload = require('gulp-livereload'),
minifycss = require('gulp-minify-css'),
browserSync = require('browser-sync').create(),
reload = browserSync.reload;

gulp.task('style', function () {
return sass('./public/sass/*.scss')
.on('error', sass.logError)
.pipe(autoprefixer('last 2 version'))
.pipe(rename({suffix:'.min'}))
.pipe(minifycss())
.pipe(gulp.dest('./public/css'))
.pipe(reload({stream:true}));
});

gulp.task('serve',function(){
browserSync.init({
proxy: "localhost:3000"
});
gulp.watch('./public/sass/*.scss',['style']);
gulp.watch('./views/*.ejs').on('change',reload);
});

gulp.task('default',['serve'],function(){

});