Gulp+ES6+依赖构建打包

ES6好多不错特性和写法,浏览器还不能很好的支持,使用gulp构建,将ES6编译成ES5,就可以欢快的编写了,最近在探索这方面的开发模式,继续加深研究中…

安装相关插件

  • npm install gulp -save-dev
  • npm install babelify -save-dev
  • npm install browserify -save-dev
  • npm install gulp-connect -save-dev
  • npm install babel-preset-es2015 -save-dev
  • npm install vinyl-source-stream -save-dev

参考目录

build/
----- bundle.js // 最终编译后的文件
src/
--- index.js // 业务文件
--- test.js // 依赖文件
index.html
package.json
gulpfile.js 

Test.js参考

let age = (x) => x;
let name = 'tom';
export {name, age};

Index.js参考

import {name, age} from "./test";
document.write(name + age(22));

Gulpfile.js 配置

var gulp = require('gulp');
var browserify = require('browserify');  
var babelify = require('babelify');
var source = require('vinyl-source-stream');
var connect = require("gulp-connect");

// 编译ES6
gulp.task('es6', function() {
    browserify({
        entries: './src/index.js',
        debug: true
      })
    .transform(babelify.configure({
        presets : ["es2015"]
    }))
    .bundle()
    .pipe(source('bundle.js'))
    .pipe(gulp.dest('./build/'));
});

// 监视文件,自动执行
gulp.task('watch', function () {
    gulp.watch('./src/*.js', ['es6']);
});

// 创建一个WEB服务
gulp.task('connect', function () {
    connect.server({
        root: './',
        livereload: true,
        port: 4000
    });
});

gulp.task('default', ['connect', 'watch']);

开始ES6欢快之旅

$ gulp // 浏览器输入127.0.0.1:4000

现在src文件夹下面js文件修改,保存后,就可以自动编译了。