Gulp使用经验

为什么要使用Gulp

在写简单页面的时候，Gulp基于任务工作流的方式，比webpack配置起来更简单。
不希望css打包在一起。

Gulp的使用

在一个网站项目中使用到了Gulp，下面记录一下使用经验。

第一阶段需求：

将ES6转为ES5，压缩JS文件。
将Less转为css。

下面是gulpfile.js文件：

var gulp = require('gulp')
var less = require('gulp-less');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');

var DEST = './static/';

var paths = {
  scripts: './static_src/*.js',
  less: './static_src/*.less',
  css: './static_src/*.css'
};

gulp.task('task_js', function () {
  var babel = require("gulp-babel");
  var uglify = require('gulp-uglify');
  var rename = require('gulp-rename');

  return gulp.src(paths.scripts)
    .pipe(babel())
    .pipe(uglify())
    .pipe(gulp.dest(DEST));
});

gulp.task('task_less', function() {
  return gulp.src(paths.less)
    .pipe(less())
    .pipe(postcss([ autoprefixer() ]))
    .pipe(gulp.dest(DEST));
});

gulp.task('task_css', function() {
  return gulp.src(paths.css)
    .pipe(postcss([ autoprefixer() ]))
    .pipe(gulp.dest(DEST));
});

gulp.task('watch', function() {
  gulp.watch(paths.scripts, ['task_js']);
  gulp.watch(paths.css, ['task_css']);
});

gulp.task('default', ['watch', 'task_js', 'task_less', 'task_css'], function() {
  console.log('complete');
});

这段脚本干的事情：

将static_src目录下的js文件编译(ES6->ES5，压缩)输出到static目录
将less转成css，再加适配浏览器的前缀，输出到static目录。
将css加适配浏览器的前缀，输出到static目录。
监听js、css目录文件的变化，文件改变自动执行任务。

需要注意的事情：

用到几个gulp插件，需要了解用法话去github或npm网站搜。
由于需要ES6转ES5，需要建一个.babelrc配置文件，配置方法本文略去，可以去bable网站查。

遇到的问题及解决方法：

执行gulp命令的时候，总是提示：gulp cannot find module:’xxx’，导致不停地安装包，原因是本地npm出了问题，解决办法: 删除node_modules，再重新安装。
将gulp命令写在package.json的scripts里，执行npm start时候执行gulp命令。

第二阶段需求：

第一阶段的脚本能满足一定的需求了，随着项目的变化，又有了js包合并、ES6Module支持、提取公共包的需求。这些交给browserify吧，需要注意的是官网只介绍了一些命令及API用法，缺少实践。

var gulp = require('gulp');
var less = require('gulp-less');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');

var uglify = require('gulp-uglify');

var babelify = require('babelify');

var DEST = './dist/';

var paths = {
  scripts: './static_src/*.js',
  commonScripts: './static_src/common/*.js',
  less: './static_src/*.less',
  css: './static_src/*.css'
};

var vendors = ['./static_src/c.js'];

gulp.task('task_es6_js', function () {
  browserify({
    entries: ['./static_src/a.js', './static_src/b.js'],
    debug: true
  })
    .external(['c.js'])
    .transform(babelify)
    .bundle()
    .pipe(source('bundle.js')) // gives streaming vinyl file object
    .pipe(buffer()) // <----- convert from streaming to buffered vinyl file object
    .pipe(uglify()) // now gulp-uglify works
    .pipe(gulp.dest(DEST));
});

gulp.task('task_es6_vendors_js', function () {
  var bf = browserify({
    debug: true
  });

  vendors.forEach(lib => {
    bf.require(lib);  //这里require公共模块，下面将额外打包vender的模块
  });

  bf.transform(babelify)
    .bundle()
    .pipe(source('c.js')) // gives streaming vinyl file object
    .pipe(buffer()) // <----- convert from streaming to buffered vinyl file object
    .pipe(uglify()) // now gulp-uglify works
    .pipe(gulp.dest(DEST));
});


gulp.task('task_less', function() {
  return gulp.src(paths.less)
    .pipe(less())
    .pipe(postcss([ autoprefixer() ]))
    .pipe(gulp.dest(DEST));
});

gulp.task('task_css', function() {
  return gulp.src(paths.css)
    .pipe(postcss([ autoprefixer() ]))
    .pipe(gulp.dest(DEST));
});

gulp.task('watch', function() {
  gulp.watch([paths.scripts, paths.commonScripts], ['task_es6_js']);
  gulp.watch(paths.css, ['task_css']);
});

gulp.task('default', ['watch', 'task_es6_js', 'task_es6_vendors_js', 'task_less', 'task_css'], function() {
  console.log('complete');
});

说明：

a.js和b.js中都引用了c.js，上面的脚本在打包的时候将c.js剔除了出去，a.js和b.js合并成了bundle.js，c.js打成了c.js（通常可以命名为vendor.js）。

（完）