2016/11/20

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');
        });
    });
});

沒有留言: