Gulp

核心思想是 Stream 在 Pipe 间的传递，而任务的先后顺序是基于依赖实现串行或者并行的。

Gulp 使用思维

  • Github Gulp General
  • Github Official API Documentation
  • 文件流读入 gulp.src(globs[, options])
    • options.buffer : deal with file-buffer ? deafult: true, false is usually for large file read.
  • 文件数据流 gulp.pipe(path[, options])
    • path cloud be any string or function
    • options.cwd output folder
    • options.mode write files mode, default: 0777
  • 注册事件流 gulp.task(name[, deps], fn)
    • Tasks run with maximum concurrency, but creating dependencies means make parallel tasks serializable.
    • fn will return a Stream or Promise or accept a callback
  • gulp.watch()

Demo

  1. gulp.src('./client/templates/*.jade')
  2.   .pipe(jade())
  3.   .pipe(gulp.dest('./build/templates'))
  4.   .pipe(minify())
  5.   .pipe(gulp.dest('./build/minified_templates'));
  7. var gulp = require('gulp');
  9. // takes in a callback so the engine knows when it'll be done
  10. gulp.task('one', function(cb) {
  11.     // do stuff -- async or otherwise
  12.     cb(err); // if err is not null and not undefined, the run will stop, and note that it failed
  13. });
  15. // identifies a dependent task must be complete before this one begins
  16. gulp.task('two', ['one'], function() {
  17.     // task 'one' is done now and return
  18.     // a promise to support async task
  19.     return new Promise()
  20. });
  22. gulp.task('three', () => {
  23.     // return a pipe stream
  24.     return gulp.src()
  25. })
  27. gulp.task('default', ['one', 'two']);
  • Watch File gulp.watch(globs[, opts, cb])
    • cb(event): event.type and event.path
gulp.watch('Blob', TASKNAME)
gulp.watch('js/**/*.js', function(event) {
  console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
});

我们至少应该向 Gulp 提供 __DEV__ 工作流以及 __PRODUCT__ 工作流。

// DEMO
var gulp = require('gulp');
var coffee = require('gulp-coffee');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var imagemin = require('gulp-imagemin');
var sourcemaps = require('gulp-sourcemaps');
var del = require('del');

var paths = {
  scripts: ['client/js/**/*.coffee', '!client/external/**/*.coffee'],
  images: 'client/img/**/*'
};

// Not all tasks need to use streams
// A gulpfile is just another node program and you can use any package available on npm
gulp.task('clean', function() {
  // You can use multiple globbing patterns as you would with `gulp.src`
  return del(['build']);
});

gulp.task('scripts', ['clean'], function() {
  // Minify and copy all JavaScript (except vendor scripts)
  // with sourcemaps all the way down
  return gulp.src(paths.scripts)
    .pipe(sourcemaps.init())
      .pipe(coffee())
      .pipe(uglify())
      .pipe(concat('all.min.js'))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('build/js'));
});

// Copy all static images
gulp.task('images', ['clean'], function() {
  return gulp.src(paths.images)
    // Pass in options to the task
    .pipe(imagemin({optimizationLevel: 5}))
    .pipe(gulp.dest('build/img'));
});

// Rerun the task when a file changes
gulp.task('watch', function() {
  gulp.watch(paths.scripts, ['scripts']);
  gulp.watch(paths.images, ['images']);
});

// The default task (called when you run `gulp` from cli)
gulp.task('default', ['watch', 'scripts', 'images']);

Gulp Plugins

  • 文件注入工具 gulp-inject
  • 文件编译工具（静态编译工具）
  • 压缩类工具
    • CSS/JS/HTML 压缩工具
    • Chunked 传输工具
    • 图像压缩工具
    • 图像生成工具
      • SpriteIcon Generator: spritesmith
  • 拼接类工具
  • 辅助类工具
    • 模块化：Webpack / Browserify
    • JSLint
    • CSSLint
  • 预编译工具
    • Less/Sass
    • CoffeeScript
    • JSX / Jade

Ref