本地實現ES6轉ES5代碼——gulpfile配置文件

　　公司裏不少同事在用ES6實現業務邏輯了，我也想試試。在公司的項目裏，我寫的ES6只要打開命令窗輸入gulp watch 就自動將ES6轉成ES5並放在相應的文件夾裏了。我回家也想練習，但又不知道該怎麼轉，用在線的babel我就只能每寫一個文件都要上去手動轉換一次，不高興這樣作。因此我就想本身搭建一個公司項目那樣的環境，幾番查閱對比，終於知道用一個gulpfile配置文件就能夠實現了。記錄下實現歷程：

1、介紹下Gulp

gulp和grunt同樣是個項目構建工具。gulp的核心在於流式操做和簡單的API，能夠自動執行指定的任務好比編譯、壓縮等，方便且高效。

2、實戰：安裝並完成gulpfile文件

一、安裝node

二、切換到工做目錄，打開命令窗運行「npm init」輸入參數，該目錄下會生成一個package.json文件，裏面包含剛剛輸入的參數。（個人參數全用的默認的，沒有單獨修改）

三、安裝gulp。命令以下， --save-dev會把安裝的都寫入package.json文件中。

npm install gulp --save-dev

四、安裝gulp插件（目前有18個），剛開始並不知道要安裝哪些插件，因此亂七八糟的看着公司項目裏有的就都安上了，後來發現其實不少是用不到的。安裝插件命令以下，不一樣插件只需修改插件名便可。

npm install gulp-babel --save-dev　　//安裝babel轉碼插件
npm install gulp-plumber gulp-replace --save-dev　　//安裝多個插件，插件間用空格分隔便可

五、新建gulpfile.js文件，gulpfile中寫的就是指定gulp完成什麼任務。gulp的方法有：task、watch、src和dest。

gulp.src(globs[, options])  指定要處理的原文件路徑，globs能夠是字符串或者數組形式，數組表示多個文件；options通常不用傳，默認是true。

gulp.src(app/js/just.try.js);　　//指定具體文件
gulp.src(app/js/*.js);　　　　　　//該app/js下的全部js文件
gulp.src(app/**/*.js);　　　　　　//app下全部文件夾中的全部js文件
！app/js/*.js　　　　　　　　　　　 //除app/js下的全部js文件外　　　　ES6寫法`!${filename}`

gulp.dest(path[,options]) 文件的輸出目錄，能夠調用多個dest將輸出寫入多個目錄。

gulp.task(name[,deps][,fn]) 定義任務，通常傳兩個參數，第一個參數任務名稱，第二個參數任務執行的函數。若是一個任務名是default，則這個任務是默認任務直接輸入gulp就會運行，通常能夠用作提示信息。

gulp.watch(globs [,opts], tasks) 監聽指定文件的變化，glob同src的globs同樣，tasks要執行的任務名或任務函數。

const from = './appes6/js/**/*.js';
gulp.watch(from, ['convertJS']);　　　　//convertJS執行的任務名
gulp.watch('app/js/just.try.js', function(){　　　　//直接用函數替代任務名，建議用任務名，這樣能夠一個任務屢次調用
　　console.log('hi');
})

六、完成的gulpfile.js文件

const gulp = require('gulp');
const babel = require('gulp-babel');
const plumber = require('gulp-plumber');
const replace = require('gulp-replace');

const from = './appes6/js/**/*.js';
const to = './app/js'

// 編譯
gulp.task('convertJS', function(){
  return gulp.src(from) //要編譯的路徑
    .pipe(plumber())  //查錯
    .pipe(babel({     
      'presets': ['es2015']     //轉換配置，還能夠添加react等
    }))
    //babel自動添加use strict可能會引發錯誤，刪除
    .pipe(replace(/"use strict";/, ''))
    .pipe(replace(/'use strict';/, ''))
    .pipe(gulp.dest(to))  //編譯完成後的輸出目錄
})


// 監視文件變化，自動執行任務
gulp.task('watch', function(){
  gulp.watch(from, ['convertJS']);
})

gulp.task('start', ['convertJS', 'watch']);

七、擴充watch。上面的文件只要運行gulp watch 就能夠監聽文件變化了。其實watch方法監控時會觸發change事件，若是咱們但願在change的時候進行其餘操做的話，只要寫在change的回調函數中就能夠。

let watcher = gulp.watch(from,['watch'])；
watcher.on('change', function(event){
    console.log('File' + event.path + 'was' + event.type + ', running tasks...')
})

 3、錯誤

都寫好後運行gulp watch，報錯以下，說明babel相關模塊沒安裝，一樣是用npm安裝babel-preset-es2015（es6轉es5）和babel-preset-react（react）

 若是上面方法尚未解決,多是路徑找錯了,gulpfile建議放在根目錄下,如要將resource-morden中的文件轉義到resource中,將gulpfile.js放在與這兩個文件夾同級的目錄下.

再補充個項目結構圖:appes6中是要轉碼的文件,app中是轉碼完成的文件夾

 

 

4、薦讀

一、gulp的github地址，有API文檔介紹，多種語言　　https://github.com/gulpjs/gulp/tree/master/docs

二、gulp官網，plugins中有插件介紹　　　　　　　　 http://gulpjs.com/　　http://gulpjs.com/plugins/

三、gulp源碼解析，偶然間看到的，沒看懂，應該還不錯，先記下來講不定之後會看到，目前有三篇，能夠都看下　　http://www.cnblogs.com/vajoy/p/6349817.html