与 Grunt 的比较

和 Grunt 类似，Gulp 也是一个前端自动化构建工具。 Gulp 和 Grunt 最显著的区别就是 Gulp 采用编码大于配置，而 Grunt 相反配置大于编码。Gulp 是基于流的构建系统，相对更侧重各任务之间的衔接，而 Grunt 侧重于一些通用的任务。另外 Gulp 更易读，但是 Grunt 相对插件要多。

安装与配置

安装全局 gulp $ npm install --global gulp 创建项目，在项目目录下安装 gulp $ npm install --save-dev gulp 创建 gulpfile.js 文件，配置 gulp

var gulp = require('gulp');

gulp.task('default', function() {
  // place code for your default task here
});

运行 gulp $ gulp

定制简单的任务

这次的侧重点放在自动化任务上，而非 gulp 本身。 首先说明下采用的目录结构为app/css下存放 scss 和 css 样式文件，app/js目录下存放 js 脚本文件，app根目录下存放 html 结构文件，在 dist 目录下存放 build 后的资源文件。 首先说明 Build Css 文件用到的一些插件： gulp-ruby-sass：用来将 scss 文件编译为 css 文件 gulp-autoprefixer：用来给 css 样式自动添加浏览器前缀 gulp-minify-css：用于 css 文件的压缩 流程如下：首先将 css 目录下 scss 文件编译为 css 文件，对 css 文件添加浏览器前缀，重命名为*.min.css，然后压缩输出到dist/css目录。

gulp.task('css', function() {
  return sass('app/css/', { style: 'expanded' })
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
    .pipe(gulp.dest('app/css'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(minifycss())
    .pipe(gulp.dest('dist/css'))
    .pipe(livereload())
    .pipe(notify({ message: 'css task complete' }));
});

然后说明 Build Js 文件用到的插件 gulp-concat：用来合并文件，这里主要合并 js 文件 gulp-uglify：混淆压缩 js 流程如下：首先合并 app 目录下 js 文件（我这里想保留 js 目录结构所以注释掉了合并任务），修改前缀为*.min.js，执行混淆压缩命令 输出到dist/js目录。

gulp.task('js', function() {
  return gulp.src('app/js/**/*.js')
    //.pipe(concat('main.js'))
    .pipe(gulp.dest('dist/js'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(uglify())
    .pipe(gulp.dest('dist/js'))
    .pipe(livereload())
    .pipe(notify({ message: 'js task complete' }));
});

接下来说下非常有用的监视任务 gulp-webserver：用于在本地启动 Http 服务 gulp-livereload：livereload 用于浏览器自动刷新 首先创建一个 watch 任务，监测所有资源文件是否发生修改，然后创建一个 webserver 任务，启动 watch 任务，webserver 任务启动时会自动打开浏览器加载当前 app 目录下 html 文件，当 watch 任务监测到文件修改时就会通知 livereload，浏览器就会实时刷新，省去了手动刷新的操作。

//Watch
gulp.task('watch', function() {

  // Watch .scss files
  gulp.watch('app/css/**/*.scss', ['css']);
  // Watch .js files
  gulp.watch('app/js/**/*.js', ['js']);
  // Watch image files
  gulp.watch('app/images/**/*', ['images']);
  // Create LiveReload server
  livereload.listen();
  // Watch any files in dist/, reload on change
  gulp.watch(['dist/**']).on('change', livereload.changed);

});

//Server
gulp.task('server', function() {
  gulp.src('app')
    .pipe(webserver({
      livereload: true,
      open: true
    }));
  gulp.start('watch');
});

最后说下 clean 任务 当你执行 build 任务，或者想删除 build 后的文件时，可以用 del 删除指定目录文件

var del = require('del');
// Clean
gulp.task('clean', function(cb) {
    del(['dist/','app/css/**/*.css'], cb)
});

有关于我的配置 可参考项目 helloGlup https://github.com/dandananddada/helloGulp.git 给出配置文件如下：

// Load plugins
var gulp = require('gulp'),
    sass = require('gulp-ruby-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    minifycss = require('gulp-minify-css'),
    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'),
    webserver = require('gulp-webserver'),
    del = require('del');

//html
gulp.task('html', function() {
    return gulp.src("app/*.html")
        .pipe(gulp.dest('dist/'))
        .pipe(livereload())
        .pipe(notify({ message: 'html task complete' }));
}); 

// css
gulp.task('css', function() {
  return sass('app/css/', { style: 'expanded' })
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
    .pipe(gulp.dest('app/css'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(minifycss())
    .pipe(gulp.dest('dist/css'))
    .pipe(livereload())
    .pipe(notify({ message: 'css task complete' }));
});

// js
gulp.task('js', function() {
  return gulp.src('app/js/**/*.js')
    //.pipe(concat('main.js'))
    .pipe(gulp.dest('dist/js'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(uglify())
    .pipe(gulp.dest('dist/js'))
    .pipe(livereload())
    .pipe(notify({ message: 'js task complete' }));
});

// Images
gulp.task('images', function() {
  return gulp.src('app/images/**/*')
    .pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
    .pipe(gulp.dest('dist/images'))
    .pipe(livereload())
    .pipe(notify({ message: 'Images task complete' }));
});

// Clean
gulp.task('clean', function(cb) {
    del(['dist/','app/css/**/*.css'], cb)
});


// Watch
gulp.task('watch', function() {

  //Watch .html files
  gulp.watch('app/**/*.html', ['html']);

  // Watch .scss files
  gulp.watch('app/css/**/*.scss', ['css']);

  // Watch .js files
  gulp.watch('app/js/**/*.js', ['js']);

  // Watch image files
  gulp.watch('app/images/**/*', ['images']);

  // Create LiveReload server
  livereload.listen();

  // Watch any files in dist/, reload on change
  gulp.watch(['dist/**']).on('change', livereload.changed);

});

//Build
gulp.task('build', ['clean'], function() {
    gulp.start('html','css', 'js', 'images');
});

//Server
gulp.task('server', function() {
  gulp.src('app')
    .pipe(webserver({
      livereload: true,
      open: true
    }));
  gulp.start('watch');
});

// Default task
gulp.task('default', ['build']);