幸せそうな人を見ると、転べって思います。@It_is_Rです。
Webページを制作するとき、sassをcssに変換して使用することが多いと思います。
今回はgulp4の使い方を、インストールから詳しく紹介していきたいと思います。
gulpとは
gulpは、sassからcssのコンパイルを含め、様々なことを自動で行ってくれる、タスクランナーと呼ばれるものです。
ただ、導入には少し手順を踏まなくてはなりません。今回はその手順も含め、解説していきます。
まず、gulpインストールするには、npmというパッケージ管理ツールを使います。
npmは、Node.jsをインストールすることで同時にインストールされます。また、Node.jsのインストールにはHomebrewを使うこともできます。
Homebrewを使わなくてもNode.jsをインストールすることはできるのですが、HomebrewにはWeb開発での便利なツールが色々あるので、インストールしておくと後々役立つかもしれません。
Homebrewのインストール
まず、Homebrewをインストールしてみましょう。
Homebrew
Homebrewのインストールには、上のリンクから画像の四角で囲まれた部分をターミナルに入力します。
詳しくは、「Homebrewを使いこなせ！Macへのインストールや使い方。」という記事をご覧ください。
Node.jsをインストール
Node.jsをインストールします。
※Homebrewを使用しない場合は、Node.jsのページからダウンロードすることも可能です。
では、Homebrewを使ってNode.jsをインストールしてみましょう。
コマンドをターミナルに入力します。
$ brew install node
これでNode.jsがインストールされます。
インストールできない場合は頭にsudoをつけてインストールします。
$ sudo brew install node
これでnpmが使用できるようになります。
npmでgulpをインストール
では、gulpをインストールしていきましょう。
gulpは、グローバルにインストールする方法もありますが、ローカルのみにインストールすれば問題ないでしょう。
まず、cd の後にディレクトリを入力、もしくはフォルダをドラッグして、作業用ディレクトリに移動しましょう。
$ cd 作業用ディレクトリ
作業用ディレクトリに移動したら、ローカルインストールする前に、「package.json」というファイルを作成します。
package.jsonを作成するには、npm initというコマンドを使います。
npm init
すると、順番に入力できるようになっていますので、入力していきましょう。（後から編集も可能ですので、それほど考える必要もありません）
入力については、npm package.json 取扱説明書をご覧ください。
また、-yというオプションをつけることで、入力を省略することができます。
npm init -y
では、gulpをローカルにインストールします。
$ npm install gulp --save-dev
–save-devというオプションをつけることで、先ほど作成したpackage.jsonに、以下の内容が記入されます。
"devDependencies": {
"gulp": "^4.0.2"
}
上記の方法では、gulpをインストールした階層でのみgulpコマンドが使用できるようになります。
もしグローバルにインストールしたい場合は、-g というオプションをつけます。
グローバルインストールは、ツールをマシンのどこからでも使用することができます。
とても簡単なのですが、あまり良くない方法とされています。
$ npm install gulp -g
ではgulpコマンドを使ってみましょう。
gulpのバージョンを見てみます。バーションを確認するには、以下のコマンドを使います。
$ gulp --version
gulpfile.jsの作成
gulpfile.jsを作ります。
gulpfile.jsは、gulpの動きを制御するためのファイルです。
例えば、以下のようなgulpfile.jsファイルを作ります。
ファイル: gulpfile.js
function message( cb ) {
console.log( 'gulpを使おう' );
cb();
}
exports.default = message;
これでgulpコマンドを入力します。
$ gulp [17:40:05] Using gulpfile ~/xxx/gulpfile.js [17:40:05] Starting 'default'... gulpを使おう [17:40:05] Finished 'default' after 2.78 ms
gulpを使おうと表示されれば成功です。
gulpを使ってファイルをコピーする
ではgulpによるファイルの操作を学んでいきましょう。
まずファイルをコピーする方法を見ていきます。
gulpfile.jsがある階層にsrcフォルダを作成し、その中にscript.jsファイルを作ります。
適当なソースを入力し、このファイルをgulpを使ってoutputフォルダへコピーします。
gulpfile.js
const { src, dest } = require( 'gulp' );
function copy() {
return src( './src/*.js' )
.pipe( dest( './output/' ) );
}
exports.default = copy;
あとは次のコマンドを実行します。
$ gulp
するとoutputフォルダが作られ、script.jsがコピーされます。
上記の例ではcopy()という関数を作成していますが、これは短くすることもできます。
gulpfile.js
const { src, dest } = require( 'gulp' );
exports.default = function() {
return src( './src/*.js' )
.pipe( dest( './output/' ) );
}
gulp-sassを使って、SassをCSSにコンパイル
sassをcssにコンパイルするためのツールを追加していきます。
gulp-sassをインストールしましょう。
ターミナルに入力します。
$ npm install gulp-sass --save-dev
では、gulpfile.jsを編集していきます。
ファイル: gulpfile.js
const { src, dest } = require( 'gulp' );
const sass = require( 'gulp-sass' );
exports.default = function() {
return src( './src/*.scss' )
.pipe( sass() )
.pipe( dest( './output/' ) );
}
2行目でgulp-sassモジュールを変数に代入し、6行目でSassを変換します。
では、実際にSassをコンパイルしてみましょう。
まず、Sass（.scss）ファイルを作っていきます。
ファイル: src/style.scss
.article {
h1 {
color: #222;
}
}
ターミナルにgulpと入力します。
$ gulp
これで、cssフォルダが作られ、さらにその中にコンパイルしたcssファイルが作られます。
ファイル: output/style.css
.article h1 {
color: #222; }
タスクに名前をつける
さて、これまで紹介してきた方法では、gulpというコマンドを入力すると実行されるわけですが。これでは一つのタスクしか実行することができません。
例えばSassのコンパイルと、Pugのコンパイルのそれぞれのタスクを作成し、使い分けるということができないのです。
そこで、タスクに名前をつけてみましょう。
では、gulpfile.jsのdefault部分を変更してみます。
こちらはgulp-sassをインストールした場合のgulpfile.jsファイルです。
ファイル: gulpfile.js
const { src, dest } = require( 'gulp' );
const sass = require( 'gulp-sass' );
exports.sass = function() {
return src( './src/*.scss' )
.pipe( sass() )
.pipe( dest( './output/' ) );
}
この例では、さきほどまでdefaultとなっていた部分をsassに変更しました。
では、この状態で実行してみます。ターミナルに以下のコマンドを入力します。
$ gulp sass
gulpの後に、sassというワードを入力することで、実行できるようになります。
これは、タスクをいくつも追加したとき、それぞれに名前をつけたい時などに使えます。
次のように複数のタスクを作成しておけば、場合に応じて使い分けることができます。
const { src, dest } = require( 'gulp' );
const sass = require( 'gulp-sass' );
exports.copy = function() {
return src( './src/*.*' )
.pipe( dest( './output/' ) );
}
exports.sass = function() {
return src( './src/*.scss' )
.pipe( sass() )
.pipe( dest( './output/' ) );
}
直列タスクseries、並列タスクparallelについて
ではseriesとparallelについて見ていきましょう。
まずseriesはタスクを順番に実行していくメソッドです。
gulpfile.js
const { series } = require('gulp');
function cat( cb ) {
console.log( 'ニャー' );
cb();
}
function dog( cb ) {
console.log( 'ワン' );
cb();
}
exports.default = series( cat, dog );
実際に実行してみると、catがスタートしてニャーと言ったら終了し、dogがスタートしてワンと言ったら終了というふうに、順番に実行されているのが分かります。
$ gulp [18:04:30] Using gulpfile ~/xxx/gulpfile.js [18:04:30] Starting 'default'... [18:04:30] Starting 'cat'... ニャー [18:04:30] Finished 'cat' after 1.88 ms [18:04:30] Starting 'dog'... ワン [18:04:30] Finished 'dog' after 444 μs [18:04:30] Finished 'default' after 5.23 ms
続いて、parallelはタスクを同時に実行するメソッドです。
gulpfile.js
const { parallel } = require('gulp');
function cat( cb ) {
console.log( 'ニャー' );
cb();
}
function dog( cb ) {
console.log( 'ワン' );
cb();
}
exports.default = parallel( cat, dog );
実際に実行してみると、catとdogが同時に実行されていることが分かります。
$ gulp [18:25:16] Using gulpfile ~/xxx/gulpfile.js [18:25:16] Starting 'default'... [18:25:16] Starting 'cat'... [18:25:16] Starting 'dog'... ニャー [18:25:16] Finished 'cat' after 1.46 ms ワン [18:25:16] Finished 'dog' after 3.17 ms [18:25:16] Finished 'default' after 5.95 ms
ファイルの変更を監視
gulpには、ファイルの変更を監視する機能があります。
早速使っていきましょう。
ファイル: gulpfile.js
const { src, dest, watch } = require( 'gulp' );
const sass = require( 'gulp-sass' );
function compileSass() {
return src( './src/**/*.scss' )
.pipe( sass() )
.pipe( dest( './output/' ) );
}
exports.sass = compileSass;
exports.watch = function() {
watch( './src/**/*.scss', compileSass );
}
13行目のwatchメソッドで、srcフォルダのscssファイルが変更された時、compileSassを実行するという命令を作成しました。
これでファイルを監視して、保存された場合に自動的にSassがコンパイルされるようになりました。
実行してみましょう。
$ gulp watch
watchを終了するには、「Ctrl + C」で終了します。
グロブについて
グロブはファイルのディレクトリを指定するときに役立つものです。
| * | 任意の文字数（’*.js’） |
|---|---|
| ** | 0個以上の階層（’**/*.js’） |
| ! | そのファイルを省く。除外（’!img/img.jpg’） |
他にも色々ありますが、よく使うのはこの3つです。
シンボリックリンク、symlinkについて
symlinkを使ってシンボリックリンクを作成すると、別の場所にあるファイルに簡単にアクセスできるようになる、ショートカットのようなものです。
const { src, symlink } = require( 'gulp' );
exports.link = function() {
return src( '../test/src/' )
.pipe( symlink( './src/' ) );
}
このようにすると、一つ上の階層にあるtestフォルダの中の、srcフォルダにあるファイルが、今現在の階層でも使用できるようになります。
lastRunで、変更があったファイルのみをコンパイル
lastRunメソッドとsrcメソッドを同時に使うことで、変更があったファイルのみをコンパイルするようにできます。
そのまま使っても、どのファイルがコンパイルされているのか分からないので、gulp-usingというプラグインを使おうと思います。
gulp-usingを使うと、どのファイルが使われているのかを見ることができます。
const { src, dest, lastRun, watch } = require( 'gulp' );
const sass = require( 'gulp-sass' );
const using = require( 'gulp-using' );
function compileSass() {
return src( './src/**/*.scss', { since: lastRun( compileSass ) } )
.pipe( sass() )
.pipe( using() )
.pipe( dest( './output/' ) );
}
exports.watch = function() {
watch( './src/**/*.scss', compileSass );
}
6行目でlastRunを使っています。
これでgulp watchを実行し、ファイルを変更すると、2回目からは変更したファイルのみがコンパイルされます。
gulp4では、taskメソッドは非推奨に
gulp4以前のgulpでは、taskメソッドを使ってタスクを作成しておりましたが、これは非推奨になったようです。
タスクはエクスポート（exports）することで使えるようになります。
まとめ
以上、gulpの使い方を詳しくまとめました。
その他にもgulpには様々なツールがあります。そのツールを使うと、もっと快適な環境を作ることができます。
gulpを活用して、自分だけの快適なオリジナル環境をつくると楽しいです。
