目標：

ES6代碼轉成ES5

對轉換后的ES5進行壓縮

以上步驟自動監控執行

步驟：

　　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 的定義，轉化、壓縮可以單獨執行，也可以合并后自動執行。

?

項目目錄結構：

?

　　

轉載于:https://www.cnblogs.com/yinluhui0229/p/5566390.html

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。