目標：

ES6代碼轉(zhuǎn)成ES5

對轉(zhuǎn)換后的ES5進行壓縮

以上步驟自動監(jiān)控執(zhí)行

步驟：

　　1.安裝插件

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

安裝全局 Gulp npm install -g gulp
安裝項目中使用的 Gulp npm install --save-dev gulp安裝 Gulp 上 Babel 的插件 npm install --save-dev gulp-babel安裝 Babel 上將 ES6 轉(zhuǎn)換成 ES5 的插件 npm install --save-dev babel-preset-es2015安裝 Gulp 上 uglify 壓縮插件 npm install --save-dev gulp-uglify

?

　　2.Gulp配置

在項目根目錄新建 .babelrc ，內(nèi)容為： {"presets": ["es2015"] }在項目根目錄新建 gulpfile.js，內(nèi)容為：var gulp = require("gulp"); var babel = require("gulp-babel"); // 用于ES6轉(zhuǎn)化ES5 var uglify = require('gulp-uglify'); // 用于壓縮 JS// ES6轉(zhuǎn)化為ES5 // 在命令行使用 gulp toes5 啟動此任務 gulp.task("toes5", function () {return gulp.src("src/js/**/*.js")// ES6 源碼存放的路徑.pipe(babel()) .pipe(gulp.dest("dist")); //轉(zhuǎn)換成 ES5 存放的路徑 });// 壓縮 js 文件 // 在命令行使用 gulp script 啟動此任務 gulp.task('min', function() {// 1. 找到文件gulp.src('dist/*.js')// 2. 壓縮文件.pipe(uglify())// 3. 另存壓縮后的文件.pipe(gulp.dest('min/js')) });// 自動監(jiān)控任務 // 在命令行使用 gulp auto 啟動此任務 gulp.task('auto', function () {// 監(jiān)聽文件修改，當文件被修改則執(zhí)行 script 任務gulp.watch('src/js/**/*.js', ['toes5']);gulp.watch('dist/*.js', ['min']);});

?

執(zhí)行：

　　根據(jù)?gulpfile.js 的定義，轉(zhuǎn)化、壓縮可以單獨執(zhí)行，也可以合并后自動執(zhí)行。

?

項目目錄結(jié)構(gòu)：

?

　　

轉(zhuǎn)載于:https://www.cnblogs.com/yinluhui0229/p/5566390.html

《新程序員》：云原生和全面數(shù)字化實踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的ES6转ES5：Gulp+Babel的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。