参考:ES6初体验——gulp+Babel搭建ES6环境 gulp-load-plugins模块化管理插件
那至于怎么使用gulp构建工具这一问题这里就略过咯(可以参考我之前发过的有关gulp的文章进行学习)。
在讲如何使用gulp来搭建ES6环境之前,先来介绍一下一个有用的插件——gulp-load-plugins(模块化管理插件)。
当然,下面这里其实也是可以跳过的啦。就当普及知识,如果已经知道,可以直接跳过。
先来看看我们在没使用该插件之前是如何做的吧。一般情况下,gulpfile.js中的模块需要一个个加载。如:
var gulp = require('gulp'),
jshint = require('gulp-jshint'), // 校验js的工具
uglify = require('gulp-uglify'), // 压缩js
concat = require('gulp-concat'); // 合并js
gulp.task('js', function () {
return gulp.src('js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'))
.pipe(uglify())
.pipe(concat('app.js'))
.pipe(gulp.dest('build'));
});
上述文件中,我们需要require gulp模块外,还要引入另外的三个模块。当模块数量更多时,这种加载的写法显得比较麻烦。这时候gulp-load-plugins模块的出现正是要解决这样的问题——可以加载package.json文件中的所有的gulp模块。
那使用gulp-load-plugins的模块后,上述文件将改写为如下。
这里先假设package.json文件的依赖如下:
{
//...
"devDependencies": {
"gulp": "^3.9.1",
"gulp-concat": "^2.6.0",
"gulp-jshint": "^2.0.4",
"gulp-load-plugins": "^1.1.0",
"gulp-uglify": "^1.4.1",
"jshint": "^2.9.4"
}
}
gulpfiles.js中的写法会是这样:
var gulp = require('gulp'),
gulpLoadPlugins = require('gulp-load-plugins'),
plugins = gulpLoadPlugins();
gulp.task('js', function () {
return gulp.src('js/*.js')
.pipe(plugins.jshint())
.pipe(plugins.jshint.reporter('default'))
.pipe(plugins.uglify())
.pipe(plugins.concat('app.js'))
.pipe(gulp.dest('build'));
});
直接不用写那么多require语句啦,统一使用如plugins这样的变量直接调用。
搭建ES6环境
都讲了这么久了,还没来重头戏呀。这不,说起这个搭建ES6环境。那么package.json中的依赖是这样的(使用到上述提到的gulp-load-plugins,其实也可以不用;还有将es6语法转为es5的gulp-babel插件):
{
// ...
"devDependencies": {
"babel-preset-es2015": "^6.5.0",
"gulp": "^3.9.1",
"gulp-babel": "^6.1.2",
"gulp-concat": "^2.6.0",
"gulp-jshint": "^2.0.4",
"gulp-load-plugins": "^1.1.0",
"gulp-plumber": "^1.0.1",
"gulp-rename": "^1.2.2",
"gulp-uglify": "^1.4.1",
"gulp-util": "^3.0.1",
"jshint": "^2.9.4"
}
}
使用命令(c) npm install就可以安装到当前项目所有依赖的模块了。
那么gulpfile.js配置文件应该长成什么样呢?
/**
* Created by DreamBoy on 2016/12/14.
*/
/**
* 出现如下错误:
* Gulp Error: Cannot find module 'jshint/src/cli'
* 请执行:npm install --save-dev jshint gulp-jshint
*/
var gulp = require('gulp'),
concat = require('gulp-concat'),
rename = require('gulp-rename'),
jshint = require('gulp-jshint'),
uglify = require('gulp-uglify');
// Load plugins
var $ = require('gulp-load-plugins')();
var SRC_DIR = './src/**/*.js';
var DIST_DIR = './dist/';
/* es6 */
gulp.task('es6', function() {
return gulp.src(SRC_DIR)
.pipe($.plumber())
.pipe($.babel({
presets: ['es2015']
}))
.pipe(gulp.dest(DIST_DIR));
});
/* es6-build */
gulp.task('es6-build', function() {
return gulp.src(SRC_DIR)
.pipe($.plumber())
.pipe($.babel({
presets: ['es2015']
}))
.pipe($.jshint())
.pipe($.jshint.reporter('default'))
.pipe($.uglify())
.pipe($.concat('build.js'))
.pipe(gulp.dest(DIST_DIR));
});
//监听文件修改
gulp.task('watch', ['es6'], function() {
gulp.watch([SRC_DIR], ['es6']);
});
上述文件中,最基本的任务为es6任务了,这个任务非常的“单纯”——将src目录下的所有.js文件由es6语法转为es5,并将生成的文件放置在dist目录下。
而任务 es6-build 除了做es6任务的事外,还就生成的js文件进行语法的校验、压缩、合并为一个文件build.js,最后存放在dist目录。
任务watch则监测src目录.js文件的变化,当文件发生变化时,调用es6任务。
那么简单的目录结构可能长这样:
在es6-01.js中写一段es6的代码,如:
export function sum(x, y) {
return x + y;
}
export var pi = 3.141593;
使用命令行,执行gulp es6,将会在dist生成对应的文件。
(END)