ES6轉ES5：Gulp+Babel

目標：

1. ES6代碼轉成ES5
2. 對轉換後的ES5進行壓縮
3. 以上步驟自動監控執行

步驟：

　　1.安裝插件

　　在命令行中定位到項目根目錄

安裝全局 Gulp
npm install -g gulp

安裝項目中使用的 Gulp
npm install --save-dev gulp

安裝 Gulp 上 Babel 的插件
npm install --save-dev gulp-babel

安裝 Babel 上將 ES6 轉換成 ES5 的插件
npm install --save-dev babel-preset-es2015

安裝 Gulp 上 uglify 壓縮插件
npm install --save-dev gulp-uglify

 

　　2.Gulp配置

在項目根目錄新建 .babelrc ，內容爲：
{ "presets": ["es2015"] }

在項目根目錄新建 gulpfile.js，內容爲：

var gulp = require("gulp"); var babel = require("gulp-babel"); // 用於ES6轉化ES5 var uglify = require('gulp-uglify'); // 用於壓縮 JS // ES6轉化爲ES5 // 在命令行使用 gulp toes5 啓動此任務 gulp.task("toes5", function () { return gulp.src("src/js/**/*.js")// ES6 源碼存放的路徑 .pipe(babel()) .pipe(gulp.dest("dist")); //轉換成 ES5 存放的路徑 }); // 壓縮 js 文件 // 在命令行使用 gulp script 啓動此任務 gulp.task('min', function() { // 1. 找到文件 gulp.src('dist/*.js') // 2. 壓縮文件 .pipe(uglify()) // 3. 另存壓縮後的文件 .pipe(gulp.dest('min/js')) }); // 自動監控任務 // 在命令行使用 gulp auto 啓動此任務 gulp.task('auto', function () { // 監聽文件修改，當文件被修改則執行 script 任務 gulp.watch('src/js/**/*.js', ['toes5']); gulp.watch('dist/*.js', ['min']); });

 

執行：

　　根據 gulpfile.js 的定義，轉化、壓縮能夠單獨執行，也能夠合併後自動執行。

 

項目目錄結構：