gulp

事始め

インストール

npm install --save-dev gulp

npm install --save-dev gulp-babel @babel/core @babel/preset-env

定義ファイルの作成

code:gulpfile.js

const gulp = require('gulp')

const babel = require('gulp-babel')

gulp.task('babel', _=>{

return gulp.src('src/*.js')

.pipe(babel({

sourceType: "script" // 'use strict'付けたくない

}))

.pipe(gulp.dest('dest'))

})

// ファイル変更があった時、バベルをやり直す

gulp.task('watch', _ => {

return gulp.watch([

'src/*.js',

'!src/unwatch.js' // exclude

], gulp.task('babel'));

});

実行

npx gulp babel

タスクを連結したい

作業毎にタスクを分けて、コマンド1つで一括実行。みたいな

code:gulpfile

gulp.task('default', gulp.series('clean', 'build', _ => {

// hogehoge

}));

モダンなフロントエンド環境構築がしたい

jsはbrowserify + babelifyでES6対応、uglifyで難読化

CSSはSASSを使う

みたいな環境構築

プラグインいろいろ

gulp-uglify

js難読化

gulp-concat

js結合

gulp-plumber

エラーハンドリング

gulp-babel

ES6 -> ES5 変換

gulp-sass

SASSコンパイル

gulp-ejs

HTMLにテンプレートエンジンを使う

gulp-htmlmin

HTMLの圧縮

gulp-eslint

gulpでeslint流す

エラー関連

Did you forget to signal async completion?

taskにreturnが書いてないとダメらしい

Task function must be specified

ブログ記事なんかで、タスクを結合したい時にタスク名を配列にして渡している場合出るエラー

gulpでbabelのタスクが繰り返し大量に実行されてしまう

自分が遭遇したのだと、監視対象 js.dev/*.jsにビルドした結果の build.jsを吐き出していたので、それを検知してまたwatchが走って・・・という再帰構造が発生していた

gulpfile記述例