ES6 Turn Es5:gulp+babel

Goal:

1. ES6 code turns into ES5
2. Compress the converted ES5
3. The above steps automatically monitor the execution

Step: 1. Install the Plugin

Navigate to the project root in the command line

Install the global Gulpnpm install-g Gulp installation project using the Gulpnpm install--save-dev Gulp install Gulp on Babel plug -in NPM install- -save-dev gulp-babel Install Babel convert ES6 to ES5 plug-in npm install--save-dev babel-preset-es2015 Install Gulp on uglify compression Plugin npm install--save-dev gulp-uglify

　　2.Gulp配置


In the project root, create a new. BABELRC with the contents:{  "presets": ["es2015"]} in the project root new gulpfile.js, the content is:var gulp = require ("Gulp"); var Babel = require ("Gulp-babel");//For ES6 conversion Es5var uglify = require (' gulp-uglify '); Used to compress js//ES6 conversion to es5//on the command line using Gulp TOES5 to start this task Gulp.task ("Toes5", function () {  return gulp.src ("src/js/**/*.js")//E S6 the path of the source code    . Pipe (Babel ())     . Pipe (Gulp.dest ("dist"));//Convert to ES5 stored path});//Compress JS File//Start this task Gulp using Gulp script on the command line. Task (' min ', function () {///1. Find File Gulp.src (' dist/*.js ')//2. Compress the file. Pipe (Uglify ())//3. Save the compressed file. Pipe (Gulp.dest (' Min/js ') )});//automatic monitoring task//Use Gulp Auto on the command line to start this task Gulp.task (' Auto ', function () {    ///Listen for file modification, execute the Script task Gulp.watch when the file is modified    (' Src/js/**/*.js ', [' toes5 ']);    Gulp.watch (' dist/*.js ', [' min ']);});

Perform:

Depending on the definition of gulpfile.js, conversions, compression can be performed individually, or they can be executed automatically after merging.

Project directory Structure:

　　

ES6 Turn Es5:gulp+babel