目前我常使用 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'); }); }); });
沒有留言:
張貼留言