基于Gulp + Browserify构建es6环境下的自动化前端项目-爱编程
基于Gulp + Browserify构建es6环境下的自动化前端项目
随着React、Angular2、Redux等前沿的前端框架越来越流行，使用webpack、gulp等工具构建前端自动化项目也随之变得越来越重要。鉴于目前业界普遍更流行使用webpack来构建es6(ECMAScript 2015)前端项目，网上的相关教程也比较多；相对来说使用gulp来构建es6项目的中文教程就比较少。
经过一段时间的摸索，我觉得其实使用gulp也可以很方便地构建es6项目。以下是我感觉gulp和webpack主要的不同之处：
gulp的任务机制和流式管道函数和webpack的配置参数风格有着显著区别，它能使开发者更清晰地了解项目的构建流程。
由于gulp是编程式风格的，所以使用起来可定制化的功能也就更灵活一些，可应对一些构建过程较为复杂的情况。
本文特此给大家介绍下如何使用gulp配合browserify来构建基于es6的前端项目。
Browserify vs Webpack
browserify与webpack都是当下流行的commonjs模块(或es6模块)合并打包工具，打包后的js文件可以直接运行在浏览器环境中。
很多人都知道，webpack功能全面，可以对js、css、甚至图片、字体文件统一进行合并打包，并且插件丰富。而browserify的特点是职责单一，只负责js模块合并打包，有些项目也并不需要将css等资源文件和js打包在一起的功能；它的代码风格也类似管道函数，和gulp的契合度较高；在github上也可以找到相当多的browserify插件，如、等等。
有一篇文章对browserify和webpack的对比进行了探讨：
本文中使用的示例项目是我准备为重构过去搞的UI组件库而建的项目，地址。目前只完成了构建生产代码的大体过程，用它来作为本文的代码示例是没有问题的，日后如有变动再更新。
项目结构目录
dist (生产代码目录，存放生成合并后的各类文件)
构建出的项目js文件
构建出的项目css文件
examples (示例目录)
src (开发代码目录)
styles (样式文件目录)
base.js (打包入口文件)
test (单元测试目录)
vendor (第三方依赖库)
babelHelpers.js
gulpfile.js (gulp配置文件)
package.json
示例项目目录大体如上所示，其中使用babel进行es6至es5转换，并使用eslint进行js代码检验。大家看到这里可能有疑问，为什么项目中没有babel及eslint的配置文件.babelrc和.eslintrc呢？原因就是这些配置文件里的内容其实是可以直接配置在gulpfile.js中的相关插件内的。
配置package.json
在这里只列出项目依赖的各种包，大致分为如下几类：
&devDependencies&: {
/*browserify包及相关插件*/
&browserify&: &^13.0.0&,
&vinyl-buffer&: &^1.0.0&,
&vinyl-source-stream&: &^1.1.0&,
&dependify&: &^0.0.1&,
/*babel相关插件*/
&babelify&: &^7.2.0&,
&babel-plugin-external-helpers&: &^6.4.0&,
&babel-plugin-transform-es2015-classes&: &^6.5.2&,
&babel-plugin-transform-es2015-modules-commonjs&: &^6.5.2&,
&babel-plugin-transform-object-assign&: &^6.3.13&,
&babel-preset-es2015&: &^6.3.13&,
&babel-preset-react&: &^6.3.13&,
&babel-preset-stage-0&: &^6.3.13&,
/*eslint相关插件*/
&babel-eslint&: &^5.0.0&,
&estraverse&: &^4.2.0&,
&estraverse-fb&: &^1.3.1&,
/*gulp包及相关插件*/
&gulp&: &^3.9.0&,
&gulp-clean&: &^0.3.1&,
&gulp-concat&: &^2.6.0&,
&gulp-cssnano&: &^2.1.1&,
&gulp-eslint&: &^2.0.0&,
&gulp-if&: &^2.0.0&,
&gulp-jasmine&: &^2.2.1&,
&gulp-less&: &^3.0.5&,
&gulp-rename&: &^1.2.2&,
&gulp-sequence&: &^0.4.4&,
&gulp-uglify&: &^1.5.1&,
/*postcss相关插件*/
&gulp-postcss&: &^6.1.0&,
&autoprefixer&: &^6.3.4&,
/*外部依赖包*/
&nornj&: &^0.3.0&,
&react&: &^0.14.8&,
&react-dom&: &^0.14.8&,
/*其他依赖包*/
&jsdom&: &^8.1.0&,
&yargs&: &^4.2.0&,
编写gulpfile.js
gulpfile.js即为gulp的配置文件，其作用类似于webpack的webpack.config.js文件。在代码风格方面，与webpack.config.js的配置参数风格不同的是，gulpfile.js更偏向编程风格。gulpfile.js整体结构如下所示：
//引入依赖的各种包：
var gulp = require('gulp'),
browserify = require('browserify'),
//定义一些全局函数及变量
function getJsLibName() {
//定义各种任务
gulp.task('build-all-js', ...);
gulp.task('build-all-css', ...);
gulp.task('build', ['build-all-js', 'build-all-css', ...]);
//定义默认任务
gulp.task('default', ['build']);
使用gulp需要定义各种任务来处理各类文件的构建生成。如例中所示，定义build-all-js任务来构建js文件，执行任务时须输入命令：
gulp build-all-js
可以定义一个默认任务，一般在这个任务里依次执行全部子任务，执行时输入命令：
关于gulp基础使用方法的更多细节大家可以参考这篇文章：
使用Browserify进行js模块合并
配合gulp使用browserify需要引入的包：
var browserify = require('browserify'),
source = require('vinyl-source-stream'),
buffer = require('vinyl-buffer'),
dependify = require('dependify'),
argv = require('yargs').argv;
创建gulp任务build-js：
gulp.task('build-js', function () {
return browserify({
entries: './src/base.js'
//指定打包入口文件
.plugin(dependify, {
//使打包后的js文件符合UMD规范并指定外部依赖包
name: 'FlareJ',
'nornj': 'nj',
'react': 'React',
'react-dom': 'ReactDOM'
.transform(babelify, ...)
//使用babel转换es6代码
//合并打包
.pipe(source(getJsLibName()))
//将常规流转换为包含Stream的vinyl对象，并且重命名
.pipe(buffer())
//将vinyl对象内容中的Stream转换为Buffer
.pipe(gulp.dest('./dist/js'));
//输出打包后的文件
function getJsLibName() {
var libName = 'flarej.js';
if (argv.min) {
//按命令参数&--min&判断是否为压缩版
libName = 'flarej.min.js';
return libName;
和webpack类似，browserify也需要指定打包的入口文件。在本例中只有一个入口文件，browserify会自动分析文件内依赖的各js模块，最终生成一个完整的打包文件。
使用dependify插件使打包后的js文符合UMD规范，并可以指定不将一些外部依赖包打进包内。使用这个插件打出来的包可以完美地生成依赖包的信息，此功能就类似于webpack中的externals参数。例如UMD中的AMD部分会这样生成：
else if (typeof define === 'function' && define.amd) { define([&nornj&,&react&,&react-dom&], ...)
其实使用browserify自带的standalone属性也可以打出UMD包，并配合browserify-shim插件也可以排除外部依赖包，但是打包后依赖包的信息只能定义为全局的。所以目前觉得还是使用dependify这个插件更完善一些。
然后使用bundle方法进行js模块合并打包，如代码为es6环境则需在此之前执行transform方法进行es6转es5。
browserify在打包后须要进行Stream转换才可和gulp配合，在这里需要使用vinyl-source-stream和vinyl-buffer这两个包。
在使用vinyl-source-stream时可以将打包文件重命名，此时可用yargs包提供的获取命令参数功能来决定是否使用压缩版命名。例如命名为压缩版需输入命令：
gulp build-js --min
最后使用gulp.dest方法指定打包后文件保存的目录。
关于browserify更详细的技术资料大家可以参考这篇文章：
使用Babel将es6代码转换为es5
由于es6代码目前大部分浏览器还未能完全支持，因此一般都需要转换为es5后执行。本示例中使用babel配合browserify在打包的过程中进行转换，babel的版本为6.0+。需要引入babelify，这个包是browserify的一个transform插件。使用方法如下：
gulp.task('build-js', function () {
return browserify({
entries: './src/base.js'
.plugin(dependify, ...)
.transform(babelify, {
//此处babel的各配置项格式与.babelrc文件相同
presets: [
'es2015',
//转换es6代码
'stage-0',
//指定转换es7代码的语法提案阶段
'react'
//转换React的jsx
plugins: [
'transform-object-assign',
//转换es6 Object.assign插件
'external-helpers',
//将es6代码转换后使用的公用函数单独抽出来保存为babelHelpers
['transform-es2015-classes', { &loose&: false }],
//转换es6 class插件
['transform-es2015-modules-commonjs', { &loose&: false }]
//转换es6 module插件
babelify插件的配置项格式与.babelrc文件完全相同。在babel升级6.0+后与之前的5.x差别较大，它拆分为了很多个模块需要分别引入。这些模块都需要单独安装各自的npm包，具体请查看package.json文件。
presets项需要使用es2015、stage-x、react三个模块：
es2015，用于转换es6代码
stage-x，用于转换更新的es7语法，x是指es7不同阶段的语法提案，目前有0-3可用
react，用于转换React的jsx代码。
plugins项可引入转换时需要的插件。一般来说babel-preset-es2015这个包中已经包含了大多数转换es6代码的模块，但也有部分模块需要在plugins中引入。例如：
transform-object-assign，用于转换Object.assign
如转换时使用loose模式(设置了loose为true时代码才可适应IE8，默认为false)，则需要单独引入这些模块的包。如transform-es2015-classes即为转换es6 class的包，如有需要可设置loose模式为true。
external-helpers，这个模块的作用是将babel转换后的一些公用函数单独抽出来，这样就可以减少转换后的冗余代码量。具体使用方法为先全局安装babel：
npm install babel-cli -g
然后执行命令：
babel-external-helpers #可加-t参数按不同方式生成，值为global|umd|var，默认为global
这样就可以在命令行中生成babelHelpers的代码，然后将之保存为babelHelpers.js，在本例中放在vendor目录内。
生成最终的js代码
由于本例中使用external-helpers方式进行es6转换，故需要将babelHelpers.js与browserify打包后的项目js文件进行连接合并：
var concat = require('gulp-concat'),
sequence = require('gulp-sequence'),
gulpif = require('gulp-if'),
uglify = require('gulp-uglify');
//定义连接js任务
gulp.task('concat-js', function () {
var jsLibName = getJsLibName();
return gulp.src(['./vendor/babelHelpers.js', './dist/js/' + jsLibName])
.pipe(concat(jsLibName))
.pipe(gulpif(argv.min, uglify()))
.pipe(gulp.dest('./dist/js'));
//将两个任务串联起来
gulp.task('build-all-js', sequence('build-js', 'concat-js'));
先使用gulp-concat插件将babelHelpers.js和项目js文件进行连接合并。
然后使用gulp-if插件判断当前执行命令是否输入了--min参数，如果是则使用gulp-uglify插件进行js代码压缩。
定义build-all-js任务来将build-js和concat-js任务串联起来，但是需要使用gulp-sequence插件才能保证这两个任务是按顺序执行的。
最后，在/dist/js目录下会生成最终的项目js文件。
执行单元测试
本例中使用jasmine进行单元测试。代码比较简单，执行所有test目录内以&Spec&结尾的文件：
var jasmine = require('gulp-jasmine');
gulp.task(&test&, function () {
return gulp.src([&./test/**/**Spec.js&])
.pipe(jasmine());
执行命令：
即可在在命令行中即可查看测试结果。
执行js代码检验
本例中使用eslint进行js代码检验，需引入gulp-eslint插件：
var eslint = require('gulp-eslint');
gulp.task('eslint', function () {
return gulp.src(['./src/**/*.js'])
//获取src目录内全部js文件
.pipe(eslint({
//此处eslint的各配置项格式与.eslintrc文件相同
&rules&: {
&camelcase&: [2, { &properties&: &always& }],
&comma-dangle&: [2, &never&],
&semi&: [2, &always&],
&quotes&: [2, &single&],
&strict&: [2, &global&]
&parser&: &babel-eslint&
.pipe(eslint.format())
.pipe(eslint.failAfterError());
执行命令：
gulp eslint
即可在命令行中即可查看js代码检测结果。
另外如果是在es6环境下使用gulp-eslint，那么还需要安装babel-eslint这个包。此处有个小坑，就是babel-eslint包是依赖estraverse和estraverse-fb包的，但这两个包其实却需要单独安装。
生成css及字体文件
例中的css及字体文件也需要合并构建，这里只简单介绍一下构建css的流程：
var less = require('gulp-less'),
cssnano = require('gulp-cssnano'),
postcss = require('gulp-postcss'),
autoprefixer = require('autoprefixer');
function getCssLibName() {
var libName = 'flarej.css';
if (argv.min) {
libName = 'flarej.min.css';
return libName;
//构建项目css文件
gulp.task('build-css', function () {
return gulp.src('./src/styles/base.less')
.pipe(less())
//转换less
.pipe(rename(getCssLibName()))
//重命名转换后的css文件
.pipe(gulp.dest('./dist/css'));
//将normalize.css与项目css进行合并
gulp.task('concat-css', function () {
var cssLibName = getCssLibName();
return gulp.src(['./vendor/normalize.css', './dist/css/' + cssLibName])
.pipe(concat(cssLibName))
//连接合并
.pipe(gulpif(argv.min, cssnano()))
//执行css压缩
.pipe(postcss([autoprefixer({ browsers: ['last 50 versions'] })]))
//自动补厂商前缀
.pipe(gulp.dest('./dist/css'));
//将两个任务串联起来
gulp.task('build-all-css', sequence('build-css', 'concat-css'));
构建全部代码
本例中的gulp默认任务即为构建全部代码，输入命令：
gulp #可加&--min&参数构建压缩版
即可执行，具体构建流程如下：
更多细节大家可以查看本文示例的。
版权所有 爱编程 (C) Copyright 2012. . All Rights Reserved.
闽ICP备号-3
微信扫一扫关注爱编程，每天为您推送一篇经典技术文章。在gulp中使用ES6
(window.slotbydup=window.slotbydup || []).push({
id: '2611110',
container: s,
size: '240,200',
display: 'inlay-fix'
您当前位置： &
[ 所属分类
| 时间 2015 |
作者 红领巾 ]
gulp在3.9版本里面增加了对babel的支持，因此我们可以直接在gulpfile里面使用ES6(ES2015)了。
升级gulp版本
首先要检测一下我们的gulp版本，确保CLI版本及Local版本都在3.9之上:
版本如下：
CLI version 3.9.0
Local version 3.9.0
若版本过低，我们可以通过以下方式进行升级，这里将同时升级CLI版本和Local版本：
npm install gulp -g && npm install gulp --save-dev
我们需要安装 babel-core
及 babel-preset-es2015
来转换ES6代码：
npm install babel-core babel-preset-es2015 --save-dev
然后，创建一个 .babelrc
文件来使用es2015 preset：
touch .babelrc
写入如下内容：
"presets": ["es2015"]
接下来就是使用ES6语法重写gulpfile了。
使用ES6语法重写gulpfile
首先，重命名gulpfile.js为gulpfile.babel.js，这样gulp执行前会自动调用babel转换文件。
mv gulpfile.js gulpfile.babel.js
然后在gulpfile.babel.js里面用ES6语法写些内容，如下：
'use strict';
import gulp from 'gulp';
import less from 'gulp-less';
const paths = {
less: 'less/',
dest: 'build/'
gulp.task('less', () =& {
gulp.src(`${paths.less}**/*.less`)
.pipe(less())
.pipe(gulp.dest(`${paths.dest}css/`));
然后执行gulp命令：
这里和原来一样，以前的命令怎么用现在还是怎么用!
GitHub源码： using-es6-with-gulp
参考资料：
/yeoman/generator-gulp-webapp/issues/356
es6-features.org
本文前端（javascript）相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程
转载请注明本文标题：本站链接：
分享请点击：
1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责；
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性，不作出任何保证或承若；
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
孤独，是给你思考自己的时间。
手机客户端
，专注代码审计及安全周边编程，转载请注明出处：http://www.codesec.net
转载文章如有侵权，请邮件 admin[at]codesec.net现在开始使用 ES6 - 简书
<div class="fixed-btn note-fixed-download" data-toggle="popover" data-placement="left" data-html="true" data-trigger="hover" data-content=''>
写了14835字，被54人关注，获得了224个喜欢
现在开始使用 ES6
在 2 月 20 号 ECMAScript 第六版就正式推出了，这门语言一直保持稳定快速的发展而且新功能也在慢慢被现在主流的 JavaScript 引擎所接受。不过要想在浏览器端或者 Node 端直接运行 ES6 代码还得等上一些日子。幸好 TC39 (负责研究开发 EMCAScript 规格的组织) 做了大量工作让我们现在可以使用 ES6 中的大部分特性了。
能够实现 ES6 到 ES5 的代码转换多亏了
(以前叫 6to5) 以及 Traceur 之类的项目。这些转换器 (更准确地说是源代码到源代码的编译器) 可以把你写的符合 ECMAScript 6 标准的代码完美地转换为 ECMAScript 5 标准的代码，并且可以确保良好地运行在所有主流 JavaScript 引擎中。
我们这里目前在使用 Babel，主要是因为它对 ES6 的支持程度比其它同类，而且 Babel 拥有完善的文档和一个很棒的。
在用 ES6 标准开始一个新项目的时候我们会建立一个目录结构来确保用 ES6 编写的代码能和编译出的 ES5 代码区分开。原始的 ES6 代码我们放在 src 目录下，而编译好的文件就是 lib 目录。这样的命名我们会在本文一直使用。（补充一点，lib 目录应该被加入 .gitignore 文件中）
安装 Babel
如果你还没安装 Babel 可以使用
npm install -g babel
Babel 一旦安装完成就可以开始编译你的 ES6 代码了。再确认一遍你已经在 src 目录放入了一些 ES6 文件，下面的命令将会把这个目录下所有 .es6, .es 和 .js 后缀的文件编译成符合 ES5 规范的代码到 lib 目录下：
babel -d lib/ src/
如果你想在文件有改动的时候自动完成这些编译工作可以使用这些常用的 JavaScript 构建工具：,
给 ES6 标准库一个"腻子"
Babel 作为一个源到源的编译器不可能呈现所有 ES6 标准库中的新特性，例如 Map 和 Set 构造器和 Array 下的一些新方法。要使用这些我们需要一个"腻子"来填补这些不足。现在有很多 ES6 的腻子比如 ，它适用与 Node, io.js 和浏览器。
译者注: 本节原始标题为 Polyfilling the standard library，术语 polyfill 来自于一个家装产品Polyfilla:
Polyfilla 是一个英国产品，在美国称之为 Spackling Paste (刮墙的,在中国称为腻子)。记住这一点就行: 把旧的浏览器想象成为一面有了裂缝的墙.这些 polyfill 会帮助我们把这面墙的裂缝抹平,还我们一个更好的光滑的墙壁 (浏览器)
编写 ES6 代码
现在构建 ES6 代码的工具已经备齐了那我们就开始真正有趣的部分。我们不会过多着眼于某个新特性，如果你有需要可以阅读
我们先在 src 目录下创建一个叫 person.es6 的文件：
import 'core-js/shim';
export default class Person {
constructor( name ) {
this.name =
sayHello() {
return `Hello ${ this.name }!`;
sayHelloThreeTimes() {
let hello = this.sayHello();
return `${ hello } `.repeat(3);
在这个很简单的例子中我们用了数个需要 Babel 来解决兼容性的语法，还有一个新的方法 String#repeat 须要由 core-js 处理。你可以用本文开头给出的 Babel 命令行代码或者用
得到运行结果。
发布到 npm
目前为止我们可以编写、编译和运行 ES6 代码，不过你也许还想把你的代码发布到 npm 上。你显然不能直接发布然后期望每个人都来自己编译一次。
幸好，npm 允许你在发布前用
选项来修改，这个特性在 CoffeeScript 项目中已经被广泛使用了。
现在把 package.json 文件加入到项目根目录中：
"name": "person",
"version": "0.1.0",
"scripts": {
"compile": "babel -d lib/ src/",
"prepublish": "npm run compile"
"main": "lib/person.js",
"dependencies": {
"core-js": "^0.6.0"
"devDependencies": {
"babel": "^4.6.0"
注意这个 compile script 会直接运行你在右边提供 Babel 命令，这样你就可以直接运行 npm run compile 来编译而不需要键入文件目录了，而 prepublish script 会在你每次执行 npm publish 的时候自动运行。
还有就是为什么 Babel 会被加入 development dependencies 中，这样如果有人想参与这个项目就不用全局安装 Babel 了，npm 会把你项目下包含可执行文件的 node_modules 目录加入到系统环境变量 path 中。
.npmignore 文件
最后你需要确保发布的是编译出的文件而不是原始的 ES6 文件。如果你的项目根目录有 .gitignore 而没有 .npmignore 那 npm 就会自动忽略你项目中包含在 .gitignore 里所有的 文件和目录。添加 .npmignore 这样你发布的包里就是编译好的文件：
编写 ES6 代码并使用源到源的编译器如
来转换成标准 ES5 代码
使用 ES6 标准库腻子如
记得在发布到 npm 的时候添加 .npmignore 文件
你可以在我们的
项目中看到一个完整的例子，这个项目是我们用于更新和新建 CouchDB 设计文档的简单脚本。
如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作！
打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮
被以下专题收入，发现更多相似内容：
推荐有用好用的网络工具软件
· 8人关注
如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作！
选择支付方式：据群众举报，经缜密侦查，共查获嫌疑人数百名。
女子在郑州高速上被踹下车，哭诉一年被打二十次。
声明：本文由入驻搜狐公众平台的作者撰写，除搜狐官方账号外，观点仅代表作者本人，不代表搜狐立场。
（点击上方公众号，可快速关注）
　　原文：Aaron Krauss
　　译文：伯乐在线 - 刘健超-J.c
　　链接：/87029/
　　ECMA 6 是 Java 的最新版本，它带来了很多新特性――一些是社区乞求已久的，一些是颇具争议的。但不管你如何看待 ES6，都应该学习并使用它――因为就是这么酷。由于能在服务器端控制 Java 版本，所以 ES6 在 node.js 或其它服务端框架运行良好，但在客户端中则不尽人意了。从一个复杂的 angular 或 ember 应用到一个简单的静态页面基本都含有几行 jQuery 代码。
　　但为何在浏览器中应用 ES6 会如此艰难呢？因为对于客户端的 Java，它能否执行完全取决于浏览器对它的支持程度。而且这不是你所能控制的，也许你的浏览器支持 ES6，但更多浏览器的支持程度很低，甚至完全不支持。即使现代浏览器最终都支持 ES6，我们仍不得不对使用旧浏览器的用户负责。所以距离我们能安全地编写 ES6 代码，并让浏览器直接执行的日子，还有很长一段时间。
　　难道这就让我们向命运低头吗？难道注定要因为浏览器不得不接受旧版本的 Java 吗？不，我们不必接受这种限制！我们还有别的选择――现在最佳的选择是编写 ES6 代码，并将其转译（transpile）或编译为 ES5 代码（兼容所有现代浏览器，如IE9+）。Babel 是主流的转译工具，它让转译过程变得简单，我们打算让这过程自动化，所以我们甚至可以不用考虑上述的限制！
　　长话短说
　　如果你只想要简洁的描述和本文所用到的纯代码，下面就是：
　　我们将会创建一个 gulpfile 去监听文件的更改，并用 Babel 将 ES6 代码自动转换到 CommonJS，然后用 Browserify 将 CommonJS 转为 合法的 ES5。当然，我们也会添加额外的插件，如 UglifyJS （为了最小化），source maps 和 livereload ―― 因为这些工具都超级有用。
　　简单粗暴，下面是完整的 gulpfile 文件：
　　vargulp= require('gulp');
　　varbrowserify= require('browserify');
　　varbabelify= require('babelify');
　　varsource= require('vinyl-source-stream');
　　varbuffer= require('vinyl-buffer');
　　varuglify= require('gulp-uglify');
　　varsourcemaps= require('gulp-sourcemaps');
　　varlivereload= require('gulp-livereload');
　　gulp.task('build',function(){
　　// app.js is your main JS file with all your module inclusions
　　returnbrowserify({entries: './src/js/app.js',debug: true})
　　.transform(&babelify&,{presets: [&es2015&]})
　　.bundle()
　　.pipe(source('app.js'))
　　.pipe(buffer())
　　.pipe(sourcemaps.init())
　　.pipe(uglify())
　　.pipe(sourcemaps.write('./maps'))
　　.pipe(gulp.dest('./dist/js'))
　　.pipe(livereload());
　　gulp.task('watch',['build'],function(){
　　livereload.listen();
　　gulp.watch('./src/js/*.js',['build']);
　　gulp.task('default',['watch']);
　　这没你想象中糟糕吧！我们在上面尝试了很多不同的东西。如果你有兴趣学习它们，我会鼓励你继续往下阅读，去了解它们是如何运行和为什么会这样运行的，这无疑会为浏览器构建出更可靠的 ES6 代码。
　　开始我们的 Gulpfile
　　我们将选择 gulp 作为自动化构建工具。gulp 是基于 Java 编写的工具，它能运行特定任务，并监听文件是否被更改。当然，这取决于你在本地项目的目录下的 gulpfile.js 配置文件。除了 gulp，还有其它自动化构建工具（grunt 也是流行的构建工具），但由于 gulp 基于 node 的流（streams）实现，因此速度更快。
　　首先，我们初始化 package.json，并本地安装 gulp（如果你未曾安装，也可全局安装）：
　　npm init# Answer all the questions
　　npm install--save-dev gulp
　　然后，创建一个空白的 gulpfile.js，并填充如下骨架：
　　vargulp= require('gulp');
　　gulp.task('build',function(){
　　gulp.task('watch',['build'],function(){
　　gulp.watch('./src/js/*.js',['build']);
　　gulp.task('default',['build','watch']);
　　上面没什么特别的地方。我们创建了空的 build、watch 和 default 任务。build 任务应包含所有构建 Java 代码的逻辑。watch 任务监控 src/js 文件夹下的文件是否被更改（构建后的文件会放在 dist/js 下）。
　　执行以上这些任务：
　　gulp build# Build
　　gulp watch# Watch
　　gulp# Default
　　到目前为止一切良好，对吧？下面就实际添加 ES6-to-ES5 构建处理。
　　执行 Babel 和 Browserify
　　在“长话短说”中我们简单讨论到，结合使用 babel 和 browserify 将 ES6 代码转成浏览器能执行的 ES5 代码。Babel 能将 ES6 转为 CommonJS，而 CommonJS 是现今 Java 最常用的模块模式（特别是在 node.js）。但现今浏览器仍不能识别 CommonJS。因此，我们需要使用 browserify 将 CommonJS 转为合法的 ES5。有了这两个工具，我们能走得更顺利。
　　然而我们不能直接使用 babel。取而代之的是 babelify 库，它是作为 browserify 的转换器――这意味着在 browserify 编译前，它会预处理 Java。那我们先安装这些包（package）：
　　npm install--save-dev babelify babel-preset-es2015 browserify vinyl-source-stream
　　现在，为了构建 ES6 代码，我们将 gulpfile 文件更改为：
　　vargulp= require('gulp');
　　varbrowserify= require('browserify');
　　varbabelify= require('babelify');
　　varsource= require('vinyl-source-stream');
　　gulp.task('build',function(){
　　returnbrowserify({entries: './src/js/app.js',debug: true})
　　.transform(&babelify&,{presets: [&es2015&]})
　　.bundle()
　　.pipe(source('app.js'))
　　.pipe(gulp.dest('./dist/js'));
　　gulp.task('watch',['build'],function(){
　　gulp.watch('./src/js/*.js',['build']);
　　gulp.task('default',['build','watch']);
　　这就是构建 Java 代码的全部东西。我们简单地告诉 browserify，我们想改变的文件（此案例中，是 src/js/app.js），另外在代码被 browserify 处理（打包）前，使用预设值为 “es2015” 的 babel 对代码进行转译。自 babel v6.0.0 版本后，babel 需要指定预设值，然后根据预设值对 Java 代码进行相应转译。 尽管这操作看起来有点麻烦，但这让开发者对整个处理过程有更多的控制权。由于我们想根据 es2015 的标准进行构建处理，我们需要通过 NPM 安装 babel-preset-es2015。
　　在文件被 browserify 处理后，将它们打包进一个单独文件（此案例中，也只有一个文件）。你可能想知道 vinyl-source-stream 是什么。gulp 是基于 node 流（stream）的，更具体地说，是基于 vinyl streams 的，这是一种虚拟的文件格式。Browserify 返回一个可读的 stream，但不是 vinyl stream。因此我们必须用 vinyl-source-stream 对 stream 进行相应转化，以确保 gulp 后续逻辑能继续执行。这是一个额外的插件，但它小巧且职责单一。
　　在 gulpfile 仅 20 行代码下，我们就能正式构建 ES6 代码为合法的 ES5 代码了。如果要编写生产环境的 Java 代码，那么在这之前，还要 uglify（丑化压缩）、source maps 和 livereload。
　　添加 Uglify、Source Maps 和 LiveReload
　　将 ES6 代码转为合法的 ES5 代码只是一件事，但将其投入到生产环境则需确保代码是被压缩的和拥有 source map 文件。为了添加这些功能，我们要为 gulpfile 文件添加以下工具：
UglifyJS：丑化并压缩 Java 文件。
Source Maps：这会有助于为压缩后的脚本进行调试。Source maps 将压缩后的文件代码映射到未压缩文件的具体位置。这对生产环境下的代码进行调试（debugging）变得更容易了。当然，source maps 文件只会在开发者工具的 console 窗口打开时才会下载，所以普通用户是不会下载它们的。
LiveReload：这工具在开发中特别有用。若其监听的文件发生变化时，它会自动刷新你的浏览器。还有个比较受欢迎的替代工具是 BrowserSync 。
　　先添加 UglifyJS。我们需要安装以下包（packages）：
　　npm install --save-dev vinyl-buffer gulp-uglify
　　并修改 gulpfile 文件：
　　vargulp= require('gulp');
　　varbrowserify= require('browserify');
　　varbabelify= require('babelify');
　　varsource= require('vinyl-source-stream');
　　varbuffer= require('vinyl-buffer');
　　varuglify= require('gulp-uglify');
　　gulp.task('build',function(){
　　returnbrowserify({entries: './src/js/app.js',debug: true})
　　.transform(&babelify&,{presets: [&es2015&]})
　　.bundle()
　　.pipe(source('app.js'))
　　.pipe(buffer())
　　.pipe(uglify())
　　.pipe(gulp.dest('./dist/js'));
　　gulp.task('watch',['build'],function(){
　　gulp.watch('./src/js/*.js',['build']);
　　gulp.task('default',['build','watch']);
　　我们添加了 gulp-uglify 和 vinyl-buffer。gulp-uglify 是 gulp 的一个插件，它能压缩 Java 代码。但 vinyl-buffer 有何用呢？由于 gulp-uglify 现在不支持 stream，而支持 buffer。vinyl-buffer 能将 stream 转为 buffer，让 gulp-uglify 能正常运行。
　　最后阶段了，让我们为 gulpfile 添加 source maps 和 livereload。同样地，先安装包（packages）：
　　npm install --save-dev gulp-sourcemaps gulp-livereload
　　OK，下面是我们最后一次修改 gulpfile 文件了：
　　vargulp= require('gulp');
　　varbrowserify= require('browserify');
　　varbabelify= require('babelify');
　　varsource= require('vinyl-source-stream');
　　varbuffer= require('vinyl-buffer');
　　varuglify= require('gulp-uglify');
　　varsourcemaps= require('gulp-sourcemaps');
　　varlivereload= require('gulp-livereload');
　　gulp.task('build',function(){
　　returnbrowserify({entries: './src/js/app.js',debug: true})
　　.transform(&babelify&,{presets: [&es2015&]})
　　.bundle()
　　.pipe(source('app.js'))
　　.pipe(buffer())
　　.pipe(sourcemaps.init())
　　.pipe(uglify())
　　.pipe(sourcemaps.write('./maps'))
　　.pipe(gulp.dest('./dist/js'));
　　.pipe(livereload());
　　gulp.task('watch',['build'],function(){
　　livereload.listen();
　　gulp.watch('./src/js/*.js',['build']);
　　gulp.task('default',['build','watch']);
　　在压缩 Java 代码前，要先初始化 source map。这就能让压缩后的代码映射到原来的代码上。然后，将 source map 作为单独一个文件保存在 maps/ 目录下。现在，每当你想查看压缩后的 JS 代码所对应的行数时，source map 就能告诉你其相应代码在未压缩文件的所在行数，这无疑让 debug 更轻松。
　　最后，让 livereoload 监听每个文件的变化，让每次构建迭代后都会刷新浏览器。为了以最简单的方式充分利用 livereload，可安装相应浏览器插件――我最喜欢的 Chrome 的插件。
　　就这样吧！我们能正式用这 gulpfile 文件了。
　　如果你遵循上述步骤（或只是复制了文章开头的 gulpfile 文件），那么你就拥有一个运行良好的、能将 ES6 代码转译成现代浏览器所识别的 ES5 代码的自动化构建系统（有一些不必要但很好的插件，如最小化和 source map）。我知道这里面有些知识点可能比较复杂，而如果你只是想为浏览器编写 ES5 代码，你大可不必深究它。但掌握它，能让你成为一个更好的开发人员。毕竟，你是在熟悉优雅的前端构建工具。
　　另外，我强烈建议你看看 ES6 文档，了解某些新特性能有效提高你的工作效率。就我个人而言，我对新的 class API 充满怨言（因为 Java 是基于原型链继承的，而不是基于类。你可以看看我的相关 文章），但对模块模式系统（module pattern system）则喜爱有加，而且我打算经常使用它。如果你打算紧追语言的最新迭代版本，babel 和 gulp 能助你一臂之力。
　　译者简介 （ ）
　　刘健超-J.c：前端，在路上...http://jchehe.github.io
打赏支持作者写出更多好文章，谢谢！
【今日微信公号推荐↓】
更多推荐请看《》
　　其中推荐了包括技术、设计、极客 和 IT相亲相关的热门公众号。技术涵盖：Python、Web前端、Java、安卓、iOS、PHP、C/C++、.NET、Linux、数据库、运维、大数据、算法、IT职场等。点击《》，发现精彩！
欢迎举报抄袭、转载、暴力色情及含有欺诈和虚假信息的不良文章。
请先登录再操作
请先登录再操作
微信扫一扫分享至朋友圈
搜狐公众平台官方账号
生活时尚&搭配博主 /生活时尚自媒体 /时尚类书籍作者
搜狐网教育频道官方账号
全球最大华文占星网站-专业研究星座命理及测算服务机构
主演：黄晓明/陈乔恩/乔任梁/谢君豪/吕佳容/戚迹
主演：陈晓/陈妍希/张馨予/杨明娜/毛晓彤/孙耀琦
主演：陈键锋/李依晓/张迪/郑亦桐/张明明/何彦霓
主演：尚格?云顿/乔?弗拉尼甘/Bianca Bree
主演：艾斯?库珀/ 查宁?塔图姆/ 乔纳?希尔
baby14岁写真曝光
李冰冰向成龙撒娇争宠
李湘遭闺蜜曝光旧爱
美女模特教老板走秀
曝搬砖男神奇葩择偶观
柳岩被迫成赚钱工具
大屁小P虐心恋
匆匆那年大结局
乔杉遭粉丝骚扰
男闺蜜的尴尬初夜
客服热线：86-10-
客服邮箱：