ES6 初體驗 —— gulp+Babel 搭建ES6環境

　　ES6已經火了很久了，我卻一直沒有在項目中嘗試過使用ES6寫代碼，只是寫過幾個Demo，在大型項目中使用ES6這件事，我一直不太敢作。最近公司要求作一個小的H5活動專題，我想不如就在這個小項目中使用ES6，一方面積累一些經驗爲大型項目作準備。另外一方面小型的活動專題不涉及後期維護，從成本上我並無冒太大的風險。下面我簡單介紹一下我搭建的ES6 環境。

　　雖然移動平臺是webkit大行其道，而且webkit對ES6支持的還不錯，可是我並不打算webkit內核裸跑ES6。我選擇了預編譯的方案——babel ，我編寫的是ES6的代碼，可是頁面上仍然是ES5的代碼。在網上查閱了很多文章結合我如今的開發環境我打算使用gulp-babel這個插件。下面咱們一塊兒來看一下：

須要哪些依賴？

　　下面是個人package.json中的devDependencies 屬性：

 1 "devDependencies": {
 2     "babel-preset-es2015": "^6.5.0",
 3     "gulp-load-plugins": "^1.1.0",
 4     "gulp-babel": "^6.1.2",
 5     "gulp-plumber": "^1.0.1",
 6     "gulp-rename": "^1.2.2",
 7     "gulp": "^3.9.1",
 8     "gulp-jshint": "^2.0.0",
 9     "gulp-concat": "^2.6.0",
10     "gulp-uglify": "^1.4.1",
11     "gulp-util": "^3.0.1"
12   }

　　npm install 後咱們就能夠看到咱們的依賴都安裝到了工程文件夾下面。

怎麼配置？

　　而後是在gulp中作ES6的配置了gulpfile.js 。 我定義了一個名爲「es6」的任務負責將目錄src/es6js/   下面全部的js文件經過babel編譯成ES5的文件並輸出到dist/ztimages  文件夾下面

 1 var gulp = require('gulp'),
 2   concat = require('gulp-concat'),
 3   rename = require('gulp-rename'),
 4   jshint = require('gulp-jshint'),
 5   uglify = require('gulp-uglify');
 6 
 7 
 8 // Load plugins
 9 var $ = require('gulp-load-plugins')();
10 
11 /* es6 */
12 gulp.task('es6', function() {
13   
14   return gulp.src('src/es6js/*.js')
15     .pipe($.plumber())
16     .pipe($.babel({
17       presets: ['es2015']
18     }))
19     .pipe(gulp.dest('dist/ztimages/'));
25 });

　　咱們有了任務，可是怎麼執行任務呢？ 在命令行工程目錄下輸入gulp es6 就能夠執行這個任務了。可是咱們不能每寫一行代碼就手動「執行」一下。這樣也太麻煩了。咱們能夠配置一個監放任務。

1 //監聽文件修改
2 gulp.task('watch', ['es6'], function() {
3   gulp.watch(['src/js/earth.js'], ['es6']);
4 });

　　相似的咱們也能夠加入LESS的文件監聽。

　　在命令行工程目錄下輸入gulp watch就能夠執行這個監放任務了。

總結：

　　這樣一個簡單的ES6環境就搭建好了。固然還有好多其餘的方法，我僅僅先介紹一個比較容易上手的方法給你們。