【转】使用gulp 进行ES6开发
原文地址:https://segmentfault.com/a/1190000004394726
一说起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,通过 import
、export
进行模块化开发,那么通过babel转码后, import
、 export
将被转码成符合CMD规范的 require
和 exports
等,但是浏览器还是不认识,这时可以使用 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.js
和 all.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开发之旅吧
【转】使用gulp 进行ES6开发的更多相关文章
- 使用gulp 进行ES6开发
使用gulp 进行ES6开发 一.新建项目 项目结构如下: /app -- /js -- /css /dist -- /js -- /css -- index.html gulpfile.js 我们的 ...
- gulp + gulp-better-rollup + rollup 构建 ES6 开发环境
gulp + gulp-better-rollup + rollup 构建 ES6 开发环境 关于 Gulp 就不过多啰嗦了.常用的 js 模块打包工具主要有 webpack.rollup 和 bro ...
- webpack+react+redux+es6开发模式
一.预备知识 node, npm, react, redux, es6, webpack 二.学习资源 ECMAScript 6入门 React和Redux的连接react-redux Redux 入 ...
- [webpack] 配置react+es6开发环境
写在前面 每次开新项目都要重新安装需要的包,简单记录一下. 以下仅包含最简单的功能: 编译react 编译es6 打包src中入口文件index.js至dist webpack配置react+es6开 ...
- webpack+react+redux+es6开发模式---续
一.前言 之前介绍了webpack+react+redux+es6开发模式 ,这个项目对于一个独立的功能节点来说是没有问题的.假如伴随着源源不断的需求,前段项目会涌现出更多的功能节点,需要独立部署运行 ...
- angular1.x + ES6开发风格记录
angular1.x和ES6开发风格 一.Module ES6有自己的模块机制,所以我们要通过使用ES6的模块机制来淡化ng的框架,使得各业务逻辑层的看不出框架的痕迹,具体的做法是: 把各功能模块的具 ...
- es6开发环境搭建,babel 将es6转化成es5
工欲善其事,必先利其器.所以我们第1节就是搭建一个基本的ES6开发环境.现在的Chrome浏览器已经支持ES6了,但是有些低版本的浏览器还是不支持ES6的语法,这就需要我们把ES6的语法自动的转变成E ...
- sublime +react+es6开发环境
Babel Sublime3才有的插件,支持ES6.JSX语法高亮. 菜单->View->Syntax->Open all with current extension as...- ...
- ES6 开发规范-最佳实践
ES6 开发规范(最佳实践) 本文为开发规范,收集方便日后查看. [开发规范]https://blog.csdn.net/zzzkk2009/article/details/53171058?utm_ ...
随机推荐
- dbg调试
一.启动停止dbg dbg:tracer(). dbg:stop(). 二.跟踪常用函数 1.跟踪进程 dbg:p(PidSpec,TraceFlags). PidSpec Pid 一个特定进程ID ...
- Windows下QT4.8.4编译环境的搭建(转载http://blog.csdn.net/bestgonghuibin/article/details/38933141)
开始使用QT了,所以第一步就是把环境搭起来,这里小记一下,以免以后忘记. 1. 下载安装文件 要使用QT功能,那么必须要下载QT的源码,还必须要一个是用QT的编译环境,可以是VS2010,也可以是专用 ...
- C#用Zlib压缩或解压缩字节数组
/// <summary> /// 复制流 /// </summary> /// <param name="input">原始流</par ...
- iOS TextField输入框点击键盘时随着键盘上移
-(void)textFieldDidBeginEditing:(UITextField *)textField { CGRect frame = textField.frame; int offse ...
- iosOC不可变字典和可变字典
//key 和 value 都属于(id)对象类型 //key常用字符串NSString来表示 //存储数值型 一般可用 NSString //int age ->@(age) // [di ...
- linux命令积累(Ubuntu)
1.查看IP地址 ifconfig 2.退出more 使用ctrl+c 3.vi编辑,删除一行为dd 4.ubuntu安装tftp服务器:http://www.cnblogs.com/geneil/a ...
- Hibernate的查询,二级缓存,连接池
Hibernate的查询,二级缓存,连接池 1.Hibernate查询数据 Hibernate中的查询方法有5中: 1.1.Get/Load主键查询 使用get或者load方法来查询,两者之间的区别在 ...
- Python中pip安装问题解决
用国内镜像通过pip安装python的一些包,有时会出现安装失败, 为什么总是失败?自己操作老标准了,这么简单的几个小步骤还老是出错,不由得让我怀疑是否是撞墙了,可是又懒得买vpn去翻~~一墙,无法代 ...
- Q promise API简单翻译
详细API:https://github.com/kriskowal/q/wiki/API-Reference Q提供了promise的一种实现方式,现在在node中用的已经比较多了.因为没有中文的a ...
- Java多线程之~~~使用Exchanger在线程之间交换数据[这个结合多线程并行会有解决很多问题]生产者消费者模型
http://blog.csdn.net/a352193394/article/details/39503857 Java多线程之~~~使用Exchanger在线程之间交换数据[这个结合多线程并行会 ...