使用gulp 进行ES6开发

使用gulp 进行ES6开发

1、新建项目

项目结构以下：

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

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

2、配置环境

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，让咱们的工做更有效率。

3、配置 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