使用gulp 进行ES6开发

一提及ES6，总会顺带看到webpack、babel、browserify还有一些认都不认识的blabla名词，对于gulp才会一点点的我来讲，心里简直是崩溃的，上网查了一些文章，探索着用gulp搭起一个ES6的开发模式，总之先一边学ES6一边写吧。。而后再让这个流程更加。。高级。

开始

ES6有不少新特性让人忍不住想去尝试，然而各类浏览器的支持程度还不足以让咱们直接在浏览器上执行ES6的代码，好在babel能够帮助咱们将ES6代码转码成ES5，再利用bowserify的帮助，咱们就能够尽情体验ES6带来的愉悦了。P.S. 构建工具使用的是gulp。

目的

制定一个流程以前仍是先得想好咱们想让这个流程是一个什么样子。

首先，开发代码和部署代码是分开的，好比咱们在/app目录下开发，而后经过gulp构建以后，代码将存放在 /dist 目录下。也就是说打开 /dist 目录下的文件，是能够直接在浏览器上运行的。

那么咱们能够约定这个流程以下：

1. 开发

在app目录下开发，这时 /js 目录下是ES6的代码。

/app
-- /js
---- app.js
---- util.js
-- /css
---- base.css
---- app.css
/dist
-- /js
-- /css
-- index.html
gulpfile.js
package.json

2. 构建

使用gulp将js转码成ES5并压缩，将css合并并压缩。

/app
-- /js
---- app.js
---- util.js
-- /css
---- base.css
---- app.css
/dist
-- /js
---- app.js // 已经转码成了ES5
---- util.js // 已经转码成了ES5
-- /css
---- all.min.css // base.css + app.css 合并、压缩并重命名的文件
-- index.html
gulpfile.js
package.json

3. 使用 bowserify

若是咱们使用了ES6中的 module，经过 import、export 进行模块化开发，那么经过babel转码后， import 、 export 将被转码成符合CMD规范的 require 和 exports 等，可是浏览器仍是不认识，这时能够使用 bowserify 对代码再次进行构建。产生文件为 bundle.js

/app
-- /js
---- app.js
---- util.js
-- /css
---- base.css
---- app.css
/dist
-- /js
---- app.js // 已经转码成了ES5
---- util.js // 已经转码成了ES5
---- bundle.js // 实际引用的js文件
-- /css
---- all.min.css // base.css + app.css 合并、压缩并重命名的文件
-- index.html
gulpfile.js
package.json

因此一开始 index.html 中引用的js文件和css文件就是 bundle.js 和 all.min.css

肯定好流程后，就开始搭建开发环境吧。

1、新建项目

项目结构以下：

/app
-- /js
-- /css
/dist
-- /js
-- /css
-- index.html
gulpfile.js

咱们的代码在 /app 目录下开发，转码、合并、压缩完以后保存在 /dist 下。

2、配置环境

1） 初始化 npm

首先进入根目录，初始化项目

$ npm init

2） 安装 gulp

$ npm install gulp --save-dev

3） 安装 gulp-babel

Babel是一个普遍使用的ES6转码器，能够将ES6代码转为ES5代码，从而在现有环境执行。

命令：

npm install --save-dev gulp-babel babel-preset-es2015

其中babel -preset-es2015 是ES2015转码规则，若是代码中含有es7的内容，能够继续安装ES7不一样阶段语法提案的转码规则

（摘自阮一峰老师的ECMAScript 6入门）

# ES2015转码规则
$ npm install --save-dev babel-preset-es2015

# react转码规则
$ npm install --save-dev babel-preset-react

# ES7不一样阶段语法提案的转码规则（共有4个阶段），选装一个
$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3

4） 安装其余gulp工具

如下是根据流程所须要安装的所有工具

$ npm install gulp-rename gulp-concat gulp-uglify gulp-cssnano browserify vinyl-source-stream --save-dev

• gulp-rename
  重命名文件

• gulp-concat
  合并文件

• gulp-uglify
  压缩js文件

• gulp-cssnano
  压缩css文件

• browserify
  让你使用相似于 node 的 require() 的方式来组织浏览器端的 Javascript 代码

• vinyl-source-stream
  将Browserify的bundle()的输出转换为Gulp可用的vinyl（一种虚拟文件格式）流

至此环境已经搭建好了。接下来咱们须要配置gulp，让咱们的工做更有效率。

3、配置 gulp

打开 gulpfile.js，编辑代码以下

const gulp = require('gulp');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
const rename = require('gulp-rename');
const cssnano = require('gulp-cssnano');
const concat = require('gulp-concat');
const browserify = require('browserify');
const source = require('vinyl-source-stream');

// 编译并压缩js
gulp.task('convertJS', function(){
  return gulp.src('app/js/*.js')
    .pipe(babel({
      presets: ['es2015']
    }))
    .pipe(uglify())
    .pipe(gulp.dest('dist/js'))
})

// 合并并压缩css
gulp.task('convertCSS', function(){
  return gulp.src('app/css/*.css')
    .pipe(concat('app.css'))
    .pipe(cssnano())
    .pipe(rename(function(path){
      path.basename += '.min';
    }))
    .pipe(gulp.dest('dist/css'));
})

// 监视文件变化，自动执行任务
gulp.task('watch', function(){
  gulp.watch('app/css/*.css', ['convertCSS']);
  gulp.watch('app/js/*.js', ['convertJS', 'browserify']);
})

// browserify
gulp.task("browserify", function () {
    var b = browserify({
        entries: "dist/js/app.js"
    });

    return b.bundle()
        .pipe(source("bundle.js"))
        .pipe(gulp.dest("dist/js"));
});

gulp.task('start', ['convertJS', 'convertCSS', 'browserify', 'watch']);

经过 watch，咱们能够在保存完代码以后，让gulp自动帮咱们将代码构建一遍，而不用本身再敲一遍命令。

开始 gulp

$ gulp start

如今就开始ES6开发之旅吧