gulp 是一款nodejs应用，它是打造前端工作流的利器，打包、压缩、合并、git、远程操作...，gulp 简单易用，而且有许多高质量的插件，

1. 安装gulp

  npm install -g gulp

如果报Error: EACCES, open '/Users/xxx/xxx.lock错误。先执行：sudo chown -R $(whoami) $HOME/.npm;

如果使用npm安装插件太慢（被墙），可执行 npm install -g cnpm --registry=https://registry.npm.taobao.org,先安装cnpm, 之后再安装插件时用cnpm安装cnpm install gulp。

2. 安装各种插件

    npm install --save gulp            //本地使用gulp
    npm install --save gulp-imagemin   //压缩图片
    npm install --save gulp-minify-css //压缩css
    npm install --save gulp-ruby-sass  //sass
    npm install --save gulp-jshint     //js代码检测
    npm install --save gulp-uglify     //js压缩
    npm install --save gulp-concat     //文件合并
    npm install --save gulp-rename     //文件重命名
    npm install --save png-sprite      //png合并
    npm install --save gulp-htmlmin    //压缩html
    npm install --save gulp-clean      //清空文件夹
    npm install --save browser-sync    //文件修改浏览器自动刷新
    npm install --save gulp-shell      //执行shell命令
    npm install --save gulp-ssh        //操作远程机器
    npm install --save run-sequence    //task顺序执行

3. gulp API

  gulp.src() :  输出符合所提供的匹配模式或者匹配模式的数组的文件。 将返
它可以被 pipe 到别的插件中。

gulp.dest() : 能被 pipe 进来，并且将会写文件。并且重新输出（emits）所有数据，因此你可以将它 pipe 到多个文件夹。如果某文件夹不存在，将会自动创建它

gulp.task() : 定义一个任务

gulp.watch() : 监听文件，并且可以在文件发生改动的时候做一些事情

gulp 实例

    var gulp = require('gulp');

    // 引入组件
    var minifycss = require('gulp-minify-css'), // CSS压缩
        uglify = require('gulp-uglify'), // js压缩
        concat = require('gulp-concat'), // 合并文件
        rename = require('gulp-rename'), // 重命名
        clean = require('gulp-clean'), //清空文件夹
        minhtml = require('gulp-htmlmin'), //html压缩
        jshint = require('gulp-jshint'), //js代码规范性检查
        imagemin = require('gulp-imagemin'); //图片压缩


    gulp.task('html', function() {
      return gulp.src('src/*.html')
        .pipe(minhtml({collapseWhitespace: true}))
        .pipe(gulp.dest('dist'));
    });

    gulp.task('css', function(argument) {
        gulp.src('src/css/*.css')
            .pipe(concat('merge.css'))
            .pipe(rename({
                suffix: '.min'
            }))
            .pipe(minifycss())
            .pipe(gulp.dest('dist/css/'));
    });
    gulp.task('js', function(argument) {
        gulp.src('src/js/*.js')
            .pipe(jshint())
            .pipe(jshint.reporter('default'))
            .pipe(concat('merge.js'))
            .pipe(rename({
                suffix: '.min'
            }))
            .pipe(uglify())
            .pipe(gulp.dest('dist/js/'));
    });

    gulp.task('img', function(argument){
        gulp.src('src/imgs/*')
            .pipe(imagemin())
            .pipe(gulp.dest('dist/imgs'));
    });

    gulp.task('clear', function(){
        gulp.src('dist/*',{read: false})
            .pipe(clean());
    });

    gulp.task('build', ['html', 'css', 'js', 'img']);

执行

gulp build

实现src目录下的html压缩，css、js合并压缩，图片压缩，最后放入 dist目录下