Gulp

和grunt类似，gulp也是一个前端自动化构建工具。 ####与 Grunt 的比较

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)
});

####有关于我的配置 可参考项目:[hellogulp] [hellogulp]: 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(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']);