Gulp Watch And Babel

目前我常使用 webpack 來編譯 JavaScript 檔案，包含 babel 的編譯，然而有時候我們可能只想寫小東西，不需要模組化，但又想要自動化偵測並且使用 babel 編譯的話該怎麼做，作法很多，我這邊採用的方式是使用 gulp-watch 來監聽檔案變動，偵測到改變以後便自動編譯

gulp-babel

首先是安裝必要的套件

npm i --save-dev gulp-watch gulp-babel

gulp 因為太常用本身我安裝在 global 了，今天的結構是要監聽 assets/js/src/ 下的所有目錄，偵測到變動後 compile 到 assets/js/build

gulpfile.js

const gulp = require('gulp');
const watch = require('gulp-watch');
const babel = require('gulp-babel');

gulp.task('babel', function() {
    watch('assets/js/src/**/*', function() {
        gulp.src('assets/js/src/**/*')
            .pipe(babel({
                presets: ['es2015']
            }))
            .pipe(gulp.dest('assets/js/build/'))
            .on('end', function() {
                console.log('file compiled!');
            });
    });
});

執行 gulp babel便會開啟監聽，當 compiled 完成後會 echo file compiled

babel-cli

這邊提供另一個方法，因為 babel 本身就有 cli 可以使用，所以我們可以監聽後搭配 child_process 的 exec 來執行 scripts

安裝 babel-cli

npm i -g babel-cli

增加 package.json scripts 指令

"scripts": {
    "babel": "babel assets/js/src/ -d assets/js/build/ --presets es2015"
}

gulpfile.js

const gulp = require('gulp');
const watch = require('gulp-watch');
const exec = require('child_process').exec;

gulp.task('babel', function() {
    watch('assets/js/src/**/*', function() {
        exec('npm run babel', function() {
            console.log('file complied');
        });
    });
});