Gulp 自动化的项目构建工具

　　在很多场合都会听到前端工和 node 程师推荐 Grunt 来实现项目的自动化，自动化可以自动完成 javascript/coffee/sass/less 等文件的的测试、检查、合并、压缩、格式化、部署文件生成，并监听文件在改动后重复指定的这些步骤。

　　得益于 Grunt 基于任务的设计模式，这些步骤可以很好的归类执行，让开发效率得到了一次提升，但杀敌 1000，得自损 800 啊，学习曲线有点高，Gruntfile配置任务很难理解，经常容易忘记。

　　Grunt.js 太复杂了，复杂到比使用和配置 Vim 都困难，之前写过得《前端自动化如何利用grunt优化项目？》，glup比较简单，配置逻辑便于理解，效率更高、健壮性更好。

　　Gulp构建系统

　　Gulp是一个构建系统，开发者可以使用它在网站开发过程中自动执行常见任务。

　　比如编译预处理CSS，压缩JavaScript和刷新浏览器，来改进网站开发的过程。　　

　　一、Gulp安装

　　1.Gulp是基于Node.js构建的，所以要先安装node.js。

　　2.安装Gulp的过程十分简单。首先，需要在全局安装Gulp包：

npm install -g gulp  //全局安装

　　3.然后，在项目目录安装Gulp：

npm install --save-dev gulp

　　4.查看gulp是否安装成功

gulp -v

　　二、安装常用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）

　　三、创建配置文件 gulpfile.js

　　在项目的根目录创建配置文件 gulpfile.js，Gulp 仅有 5 个方法就能组合出你需要的任务流程：task, run, watch, src, dest

//引入gulp插件node模块
var gulp = require('gulp'),
    sass = require('gulp-ruby-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    //gminifycss = require('gulp-minify-css'),
    jshint = require('gulp-jshint'),
    uglify = require('gulp-uglify'),
    imagemin = require('gulp-imagemin'),
    concat = require('gulp-concat'),
    livereload = require('gulp-livereload'),
    notify = require('gulp-notify');

//Gulp 仅有 5 个方法就能组合出你需要的任务流程：task, run, watch, src, dest

    //每个gulp.task(name, fn)都是一个任务配置模块，
    gulp.task('uglify',function(){
    
        //gulp.src(glob)返回了一个可读的stream，如此行返回了./js/*.js下的全部
        gulp.src('./js/*.js')
            .pipe(uglify())
             //gulp.dest(glob)返回一个可写的stream，如此行是将文件流写入到 ./dist/js 里的对应路径下            
            .pipe(gulp.dest('./dist/js'))
            .pipe(notify({message:'可以了 ok !'}))
    })
    
    gulp.task('imagemin',function(){
        gulp.src('./image/*.*')
            .pipe(imagemin())
            .pipe(gulp.dest('./dist/image'))
            .pipe(notify({message:'compress ok !'}))
    })
    
    //定义名为"watch"的任务
    gulp.task('watch',function(){
        gulp.watch('./image/*.*');
        gulp.watch('./js/*.js');
        gulp.watch('./css/*.css');
        gulp.watch('./scss/*.scss');
    })    
    //每个gulpfile.js里都应当有一个dafault任务，它是缺省任务入口（类似C语言的main()入口），运行gulp的时候实际只是调用该任务（从而来调用其它的任务）
    gulp.task('default',function(){
         //gulp.run(tasks)表示运行对应的任务，这里表示执行名
        gulp.run('uglify','imagemin');
        //执行'watch'监听任务
        gulp.run('watch');    
    })　

　　四、运行gulp

　　通过gulp+任务名称，就可以运行gulp例

gulp watch