使用gulp 进行ES6开发

18

一说起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,通过 importexport 进行模块化开发,那么通过babel转码后, importexport 将被转码成符合CMD规范的 requireexports 等,但是浏览器还是不认识,这时可以使用 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.jsall.min.css

确定好流程后,就开始搭建开发环境吧。

一、新建项目

项目结构如下:

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

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

二、配置环境

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,让我们的工作更有效率。

三、配置 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开发之旅吧


如果觉得我的文章对你有用,请随意赞赏

你可能感兴趣的

16 条评论
wnow20 · 2016年01月31日

你的抄了一段阮一峰大大的代码,小心他来打你,[偷笑]

+1 回复

wnow20 · 2016年01月31日

这个思路很对我胃口,不过我更喜欢用webpack

回复

时间被海绵吃了 作者 · 2016年01月31日

哈哈我待会去注明一下

回复

smallturbo · 2016年11月01日

大神,给个联系方式让小菜鸟向你学习一波

回复

时间被海绵吃了 作者 · 2016年11月02日

不是大神。。qq 是825980764

回复

chima · 2016年12月27日

非常感谢您的文章。我在开发中有个问题
我使用 import 引入 jquery (已经用 npm 在 devDependencies 添加 jquery)
最终 bundle.js 里面是 jquery 的源码,这个不是我想要的结果我不希望 jquery 出现在bundle.js 我该如何解决?蟹蟹

回复

时间被海绵吃了 作者 · 2016年12月27日

可以使用 webpack 的 externals 属性,你的三方库(如 jquery)依旧是通过 script 标签引入,但是通过 externals 配置之后,在你的代码里面可以通过 import 引入。实际上也就是告知 webpack 不要把你的 jquery 打包进去。
用法可以参考 https://segmentfault.com/q/10...
文档:https://webpack.github.io/doc...

回复

chima · 2016年12月28日

蟹蟹

回复

frontendx · 2017年01月11日

[00:36:13] Starting 'convertJS'...
[00:36:14] Starting 'convertCSS'...
[00:36:14] Starting 'browserify'...
[00:36:14] Starting 'watch'...
[00:36:14] Finished 'watch' after 15 ms
[00:36:14] Finished 'convertCSS' after 50 ms
[00:36:14] Finished 'convertJS' after 227 ms
events.js:160

  throw er; // Unhandled 'error' event
  ^

Error: Cannot find module 'common' from '/Users/xxb/yourXXB/S-study/G-gulp/ES6-gulp-js/dist/js'

at /Users/xxb/yourXXB/S-study/G-gulp/ES6-gulp-js/node_modules/.1.1.7@resolve/lib/async.js:46:17
at process (/Users/xxb/yourXXB/S-study/G-gulp/ES6-gulp-js/node_modules/.1.1.7@resolve/lib/async.js:173:43)
at ondir (/Users/xxb/yourXXB/S-study/G-gulp/ES6-gulp-js/node_modules/.1.1.7@resolve/lib/async.js:188:17)
at load (/Users/xxb/yourXXB/S-study/G-gulp/ES6-gulp-js/node_modules/.1.1.7@resolve/lib/async.js:69:43)
at onex (/Users/xxb/yourXXB/S-study/G-gulp/ES6-gulp-js/node_modules/.1.1.7@resolve/lib/async.js:92:31)
at /Users/xxb/yourXXB/S-study/G-gulp/ES6-gulp-js/node_modules/.1.1.7@resolve/lib/async.js:22:47
at FSReqWrap.oncomplete (fs.js:112:15)

请问这是什么原因呢?

回复

0

没有找到 common 模块?npm install common 试试?

时间被海绵吃了 作者 · 2017年08月16日
_Construct · 2017年08月31日

都是统一入口,但是如果是另外一个页面也是这个入口,js操作的同名元素不是冲突了吗

回复

0

多个页面为什么会是同一个入口呢?

时间被海绵吃了 作者 · 2017年09月01日
秋刀鱼饲养员 · 2017年11月20日

个人遇见两个问题 自己 cnpm install babel-core --save-dev 第二个 gulpfile修改了配置文件的browserify 然后可以使用了 仅本垃圾的个人使用问题

回复

null · 2017年12月11日

马克一个

回复

segmentfaults · 3月16日

[11:03:55] Plumber found unhandled error:
Error in plugin "gulp-babel"
Message:

Plugin/Preset files are not allowed to export objects, only functions. In E:

GITdemogulpZiDongHuanode_modulesbabel-preset-es2015libindex.js
(node:13420) UnhandledPromiseRejectionWarning: Unhandled promise rejection (reje
ction id: 1): Error: Line 8: Unexpected token ILLEGAL ᐀Ꙭ⩰&乐(ӄӒӞӪӶԂԎԚԦԲԾ的得德地の嘚的得德地の嘚得=
它报错了

回复

qiulang · 6月14日

示例里的写法是有问题的,比如 gulp.task('start', ['convertJS', 'convertCSS', 'browserify', 'watch']); 因为每个任务并行执行,而实际上需要他们串行

回复

载入中...