Published: 2021-04-24
Gulpでフロントエンド開発を自動化してラクをする
効率的にコーディングをするためのnpmパッケージはたくさんありますが、 何かを変更するたびに毎回コマンドを実行しないといけないのは面倒です。 ここでは、変更を検知してコマンドを自動的に実行できるGulpと、実行するタスク(gulp-sass, gulp-pug, gulp-babel)を作っていきます。
効率的にコーディングをするためのnpmパッケージはたくさんありますが、 何かを変更するたびに毎回コマンドを実行しないといけないのは面倒です。 ここでは、変更を検知してコマンドを自動的に実行できるGulpと、実行するタスク(gulp-sass, gulp-pug, gulp-babel)を作っていきます。
Gulpによる自動化
タスクランナーとは
フロントエンド開発においFて、SassからCSSへの変換、テンプレートからHTMLへの変換、画像の圧縮など様々なタスクがあります。 これらを、自動的に実行してくれるのがタスクランナーです。 タスクランナーにはGrunt, Gulpなどがありますが、ここではGulpを導入します。
Gulpの導入
Gulpはnpmパッケージなので、npmコマンドでインストールします。プロジェクトのルートディレクトリで以下を実行します。
consolenpm install gulp gulp-cli --save-dev
まずは、SassをCSSに変換するタスクを定義するために、以下のパッケージをインストールします。
consolenpm install sass gulp-sass --save-dev
gulpfile.jsの作成
Gulpで実行したいタスクは、gulpfile.jsというファイルに記述していきます。 プロジェクトのルートディレクトリに、gulpfile.jsを用意します。
gulpfile.jsconst { src, dest } = require('gulp');
const gulpSass = require('gulp-sass');
function taskSass() {
return src('sass/**/*.scss')
.pipe(gulpSass())
.pipe(dest('css/'))
}
exports.sass = taskSass
gulpfile.jsはNode.jsで記述します。
1行目は、gulpパッケージからメソッド(ここではsrcとdest)を呼び出しています。 srcメソッドは、プロジェクトから指定したパスにマッチするファイルを読み込みます。destメソッドは、指定したディレクトリに処理したものを出力します。
4〜8行目は、Sassを変換するタスク(taskSass)です。戻り値にgulpのメソッドストリームを指定します。 sassディレクトリ配下にあるすべてのscss拡張子ファイルを、sassコマンドを通してcssディレクトリに出力するというタスクです。
10行目で、呼びされる際のデフォルトのメソッド(ここではtaskSass)を指定しています。
exports.sassに指定したメソッドは、以下のコマンドで実行できます。 正常に実行されると、以下のようなメッセージが出力されます。
consolegulp sass
// 以下のような内容が出力される
[08:34:56] Using gulpfile ~/Projects/someProject/gulpfile.js
[08:34:56] Starting 'sass'...
[08:34:56] Finished 'sass' after 1.6 ms
複数タスクを同時に実行させる
別のタスクを用意して、複数のタスクを実行させましょう。 テンプレートエンジンであるPugをHTMLに変換し、さらにインデントをきれいにするタスクを登録します。
gulpfile.jsconst { src, dest, series, parallel } = require('gulp');
const gulpSass = require('gulp-sass');
const gulpPug = require('gulp-pug-3');
const gulpBeautify = require('gulp-beautify');
function taskSass() {
return src('sass/**/*.scss')
.pipe(gulpSass())
.pipe(dest('css/'))
}
function taskPug() {
return src('resource/pug/**/*.pug')
.pipe(gulpPug())
.pipe(gulpBeautify.html({ indent_size: 2 }))
.pipe(dest('public/'))
}
exports.default = parallel(taskSass, taskPug)
exports.defaultに指定しているのは、taskSassとtaskPugを並列(pararell)に実行するというものです。 1行目、gulpからseriesメソッドとparallelメソッドを呼び出していることに注意してください。 タスクを直列(series)、または並列(parallel)に実行することができます。series,parallelは更に入れ子にすることもできます。
gulpタスクを実行します。
consolegulp default
//または以下(defaultは省略できる)
gulp
// 以下のような内容が出力される
[08:58:59] Using gulpfile ~/Projects/someProject/gulpfile.js
[08:58:59] Starting 'default'...
[08:58:59] Starting 'taskPug'...
[08:58:59] Starting 'taskSass'...
[08:58:59] Finished 'taskSass' after 72 ms
[08:58:59] Finished 'taskPug' after 79 ms
[08:58:59] Finished 'default' after 81 ms
ファイルの変更を監視して自動実行(watch)
タスクを実行してファイルを変換することはできました。ですが、それでも毎回gulpコマンドを叩かなければなりません。 そこで、ユーザの変更を監視して自動的にタスクを実行できる機能を利用します。
gulpパッケージからwatchメソッドを追加で読み込みます。
const { src, dest, series, parallel, watch } = require('gulp');
// ...(省略)
exports.watch = function() {
watch('sass/**/*.scss', taskSass);
watch('pug/**/*.pug', taskPug);
}
gulp watchコマンドを実行すると、監視している状態になります。
consolegulp watch
// 以下のような内容が出力される
[09:03:04] Using gulpfile ~/Projects/someProject/gulpfile.js
[09:03:04] Starting 'watch'...
ためしにsassファイルを編集してみます。すると自動的にtaskSassタスクが実行されることがわかります。
console[09:03:04] Using gulpfile ~/Projects/someProject/gulpfile.js
[09:03:04] Starting 'watch'...
[09:03:19] Starting 'taskSass'...
[09:03:19] Finished 'taskSass' after 373 ms
プロジェクトの起動時に一度gulp watchコマンドを実行しておけば、あとはwatchメソッドで監視対象にしておいたファイルを編集するたびに 自動的にGulpのタスクが実行されます。SassをいちいちCSSに変換する手間から開放されます。
その他タスク
Webpack
Webpackはモジュールバンドラーというもので、アプリケーションで読み込むJavaScriptなどのファイル群をまとめて出力してくれるものです。 Javascriptのモジュールは互いに依存しあっていることが多いため、その関係を考慮しながら順番に読み込むのは大変です。 Webpackはその依存関係も含めて一つのファイルにまとめる(バンドル)することができます。 任意の形式のファイルに対して特定のタスクを実行して出力する事ができるので、タスクランナーのような使い方もできます。
Browserify
npmパッケージ化されているライブラリを、requireメソッドを呼ぶことによりブラウザ向けJavaScript内で利用できます。 node_modulesディレクトリの中からわざわざライブラリを探してパスを指定しなくて済みます。
consolenpm install browserify --save-dev
Babel
JavaScriptでは、ES2015から新しい書き方も導入されました。しかし、IEなどのブラウザではES2015に対応していません。 またJavaScriptには、TypeScriptやDart、CoffeeScriptなど様々な拡張言語(AltJS)があります。 これらはブラウザで処理できないので、処理できるようなJavaScriptに変換してあげる必要があります。
以下はES2015以降の記法をブラウザ向けに変換させる場合です。preset-envというプリセットを適用しています TypeScript変換用のpreset-typescript、React変換用のpreset-reactなども存在します。
const taskBabel = () => {
return src("resource/es2015/**/*.js")
.pipe(babel({
presets: ["@babel/preset-env"]
}))
.pipe(dest("public/js/"))
}
また、Babelの設定を.babelrcというファイルに書くこともできます。 Babelの実行時に、存在する.babelrcを自動的に読み込んでくれるようになります。
.babelrc{
"presets": ["@babel/preset-env"]
}
BrowserSync
gulp watchで自動的に変更しても、反映を確認するためにはブラウザをリロードする必要があります。 このリロードを自動的に行なってくれるBrowserSyncというものがあります。
gulpfile.jsconst sync = require('browser-sync').create();
.. (省略)
function taskBrowserSync(cb) {
sync.reload();
cb();
}
exports.watch = function () {
sync.init({
server: 'public/'
});
watch('resource/sass/**/*.scss', series(taskSass, taskBrowserSync));
watch('resource/pug/**/*.pug', series(taskPug, taskBrowserSync));
}