转载

前端自动化之神器 — Gulp

Nodejs不仅把Javascript带到了服务端，也在前端掀起了自动化的浪潮，推动了前端工作的历史性巨变，今天和大家一起学习前端自动化的神器---Gulp;

说起自动化，自然少不了Grunt，这位前辈目前社区完善，拥有几千个现成插件，install下来参考文档即可配置使用（参见：前端自动化之利剑——Grunt ）；而Gulp的出现，希望取其精华并取代Grunt，成为最流行的Javascript构建工具，Gulp采用代码优于配置的策略，让简单的事继续简单，让复杂的事变得可管理；

与Grunt的不同：

流：Gulp是一个基于流的构建系统，使用代码优于配置的策略。
插件：Gulp的插件更纯粹，单一的功能，并坚持一个插件只做一件事。
代码优于配置：维护Gulp更像是写代码，而且Gulp遵循CommonJS规范，因此跟写Node程序没有差别。
没有产生中间文件

使用Gulp的优势就是利用流的方式进行文件的处理，通过管道将多个任务和操作连接起来，因此只有一次I/O的过程，流程更清晰，更纯粹。Gulp去除了中间文件，只将最后的输出写入磁盘，整个过程因此变得更快。

下面在根目录下新建一个Gulpfile.js，我们将完成以下任务：

图片的无损压缩
Sass文件的编译压缩
JS文件的压缩合并
对以上任务的实时监听

cmd进入项目根目录，安装所需要的Gulp及其插件：

 1 npm install gulp gulp-imagemin gulp-ruby-sass gulp-uglify gulp-cache gulp-watch --save-dev

Gulp遵循Commonjs规范，所以你可以像写Nodejs程序一样把插件们require进来；

 1 var gulp=require('gulp');  2 var imagemin=require('gulp-imagemin'); 3 var cache=require('gulp-cache');  4 var uglify=require('gulp-uglify');  5 var sass=require('gulp-ruby-sass');  6 var watch=require('gulp-watch');

接着完成我们要完成的任务：

  1 //图片的无损压缩  2 gulp.task('imagemin',function() {  3     return gulp.src('./dist/images/**.*')  4             .pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))  5             .pipe(gulp.dest('./dist/images'));  6 });  7   8 //js的压缩合并  9 gulp.task('uglify', function() { 10     gulp.src('./js/*.js') 11         .pipe(concat('all.js')) 12         .pipe(gulp.dest('./dist')) 13         .pipe(rename('all.min.js')) 14         .pipe(uglify()) 15         .pipe(gulp.dest('./dist')); 16 }); 17  18 //sass的编译压缩 19 gulp.task('sass',function() { 20     return sass('./dist/css/*.scss',{ 21                 style:'compressed', 22                 loadPath:[ 23                     'common/vars', 24                     'mixins/mixin', 25                     'mixins/css3', 26                     'common/reset', 27                     'common/com-class', 28                     'placeholders/placeholder' 29                 ] 30             }) 31             .pipe(gulp.dest('./dist/min')); 32 }); 33  34 //实时监听任务 35 gulp.task('watch',function() { 36     gulp.watch('./dist/css/*.scss',['sass']); 37     gulp.watch('./dist/react/main4.js',['uglify']); 38 })

是不是很酷！各插件详细配置，请自行github，同学们加油！

正文到此结束