Using gulp for ES6 transcoding

ECMAScript 6.0 (ES6 for short) is the next generation standard of the JavaScript language and was officially released in June 2015. As a new generation of programmers with ideals and pursuits, of course we cannot let go of such a good thing.

But the compatibility issue of ES6 gives everyone a headache. Fortunately, there is such a thing as the ES6 transcoder that can free us from such troubles. So as a loyal fan of gulp, how can we easily and quickly implement the conversion from ES6 to ES5? Transcoding:

1. First we need to download the gulp-babel plug-in and babel-preset-es2015 rule set:

Command line code

npm install --save-dev gulp-babel babel-preset-es2015

2 .Next, we start writing the gulpfile.js file:

Js code

var gulp = require('gulp');

var babel = require('gulp-babel');

var config={

es6file:'src/js/test.js',

es5file:'dist/js/'

};

gulp.task('es6', function () {

return gulp.src(config.es6file )

.pipe(babel({

                                                                                                              

.pipe(gulp.dest(config.es5file));

});

gulp.task('default', function () {

gulp.watch(config.es6file, ['es6']);

});

3. Finally, enter the gulp command to open Task monitoring:

Command line code

gulp

4. Next, write the following ES6 code in the src/js/test.js file and save it to see if the test is successful:

Es6 code

let arr=[1, 6,8,3];

let a="likeke";

arr.map(item=>item+1);

When we open the dist/js/test.js file, we will see that the conversion was successful Code:

　

Js code

"use strict";

/** 

 * Created by likeke on 16-9-28. 

 */

var arr = [1, 6, 8, 3];

var a = "likeke" ;

arr.map(function (item) {

return item + 1;

});