gulp.jsはまだオワコンちゃうでって話
前置き
ふと、タスクランナーのgulp.jsが何年前からあるのか気になり
調べてみました。
ですが残念ながらwikiには、v4.0系のリリース時期しか出てませんでした。
しかし、最新の4.0系でも2017年、もう2年も前なんですね。
それではgulpの初回リリースはいつなのだろうかと
もう少し調べてみたところ
chromeの期間指定ツールで検索かけただけなので全く正確な情報ではないのですが
gulpに関する日本語の記事は一番古いので2010年頃からありました。
日本語情報が出回るのには時間差がある事を考えると
gulpは恐らく10年以上前からあったのでしょう。
ものすごい、古株ですね。
最近、なんとなく感覚的に、もうそろそろgulpはオワコンかな？
と感じていたのですが
10年も前からあったとしたらその可能性も高いですね。
しかし、もうオワコン疑惑もあるgulpですが
es6+で書ければ、まだまだ現場で活躍できるツールになるのでは？
と思ったので
babelを導入してgulpを若返らせてみました！
サンプルはまとめの最後にリポジトリのリンク記載してます。
兎にも角にも、まずは必要な依存関係をインストール
依存関係はこんな感じです。
とりあえず、テスト用にsassをトランスパイルする
タスクを作ってみようかと
gulp-plumberは、
確かsassの構文が間違っていた時にエラーでプロセスが停止するのを防ぐためのプラグインだったかと思います。
"devDependencies": { "@babel/cli": "^7.6.2", "@babel/core": "^7.6.2", "@babel/preset-env": "^7.6.2", "@babel/preset-es2017": "^7.0.0-beta.53", "@babel/register": "^7.6.2", "babel-preset-latest": "^6.24.1" }, "dependencies": { "@babel/polyfill": "^7.6.0", "gulp": "^4.0.2", "gulp-plumber": "^1.2.1", "gulp-sass": "^4.0.2", "gulp-sourcemaps": "^2.6.5" }
あと、これはまぁどっちでも良いのですが、
いちいち「npm i -g gulp」でgulpコマンド入れなくても良いように
npm scriptsに下記も追記しときます。
"scripts": { "start": "node node_modules/gulp/bin/gulp" }
es6+版gulpに必要なファイル
プロジェクトルートに
「babel.config.js」と
「gulpfile.js」の代わりに、「gulpfile.babel.js」が必要です。
「babel.config.js」は「.babelrc」でも良いようですが、
公式では「babel.config.js」の方が推奨のようだったので
「babel.config.js」にします。
各ファイルの中身ですが
babel.config.jsがこちら
多分、もっと便利に細かい設定できるんだろうけど、とりあえずはこんだけの設定で
const presets = [ [ '@babel/preset-env', { targets: { node: 'current' } } ], ] module.exports = { presets }
gulpfile.babel.jsはこんな感じです。
かつてのgulpfileからは考えられないほどスッキリ！
まぁ今回、sassのトランスパイルだけなんですが...(汗)
import { task, series, parallel } from 'gulp' import sass from './tasks/sass' task('default', series( parallel( sass.generate, sass.observe ) ) )
各タスクはtasksディレクトリ内で切ってしまう。
今回のサンプルはもうsassだけなので
「tasks/sass」のindex.jsにまとめてしまってます。
結果的に、index.jsだけで収まってしまっているので
「tasks/sass.js」でも良いですね。
「sass/index.js」の中身はこんな感じです。
import { src, dest, watch, series } from 'gulp' import sourcemaps from 'gulp-sourcemaps' import sass from 'gulp-sass' import plumber from 'gulp-plumber' const path = { src: './src/sass/**/*.scss', dist: './dist/css/', reject: '!./src/sass/**/_*.scss' } const message = (done) => { console.log('scss -> css converted!') done() } const generate = (done) => { src([path.src, path.reject]) .pipe(plumber()) .pipe(sourcemaps.init()) .pipe(sass({ outputStyle: 'expanded' })) .pipe(sourcemaps.write('./.maps')) .pipe(dest(path.dist)) done() } const observe = (done) => { watch([path.src]) .on('change', series(generate, message)) done() } export default { generate, observe }
index.js内で、ソースコードが肥大化して荒れそうな場合は？
es6+で書けるので
例えば、「sass/index.js」の
generateの処理が肥大化した場合
「sass/generate.js」というモジュールを作ってやると良いですね。
ファイルの中身はこんな感じですかね？
import { src, dest } from 'gulp' import sourcemaps from 'gulp-sourcemaps' import sass from 'gulp-sass' import plumber from 'gulp-plumber' const path = { src: './src/sass/**/*.scss', dist: './dist/css/', reject: '!./src/sass/**/_*.scss' } export default (done) => { src([path.src, path.reject]) .pipe(plumber()) .pipe(sourcemaps.init()) .pipe(sass({ outputStyle: 'expanded' })) .pipe(sourcemaps.write('./.maps')) .pipe(dest(path.dist)) done() }
generateタスク専用のモジュールなんで
export default に直接入れてやればオッケーです！
「sass/index.js」の方では
下記のようにgenerateモジュールをインポートしてやって
最後に、エクスポートしてやれば良いですね。
import generate from './generate' ...中略 export default { generate, observe }
