那用gulp+Babel来搭建ES6环境

那至于怎么使用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项目目录


在es6-01.js中写一段es6的代码,如:

export function sum(x, y) {
    return x + y;
}
export var pi = 3.141593;

使用命令行,执行gulp es6,将会在dist生成对应的文件。

未经允许不得转载:皓眸大前端 » 那用gulp+Babel来搭建ES6环境

赞 (0)
分享到:更多 ()

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址