安装Gulp插件 我们将要使用Gulp插件来完成我们以下任务:
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 )
安装这些插件需要运行如下命令:
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 ( ) { gulp.watch ('src/styles/**/*.scss' , ['styles' ]); gulp.watch ('src/scripts/**/*.js' , ['scripts' ]); gulp.watch ('src/images/**/*' , ['images' ]); });
我们将不同类型的文件分开处理,执行对应的数组里的任务。现在我们可以在命令行输入 $ gulp watch
执行监听任务,当 .sass
、 .js
和图片修改时将执行对应的任务。
自动刷新页面 Gulp也可以实现当文件修改时自动刷新页面,我们要修改 watch
任务,配置LiveReload:
1 2 3 4 5 6 gulp.task ('watch' , function ( ) { livereload.listen (); 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 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.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' })); }); 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' })); }); 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' })); }); gulp.task ('clean' , function (cb ) { del (['dist/assets/css' , 'dist/assets/js' , 'dist/assets/img' ], cb) }); gulp.task ('default' , ['clean' ], function ( ) { gulp.start ('styles' , 'scripts' , 'images' ); }); gulp.task ('watch' , function ( ) { gulp.watch ('src/styles/**/*.scss' , ['styles' ]); gulp.watch ('src/scripts/**/*.js' , ['scripts' ]); gulp.watch ('src/images/**/*' , ['images' ]); livereload.listen (); gulp.watch (['dist/**' ]).on ('change' , livereload.changed ); });