Gulpを初めて使ってみた！導入からタスクお試し（gulp-cssmin, browser-sync）までの手順

Webサイトのコーディング時には、裏側で細々とした「タスク」がたくさん発生しています。

• SASSのコンパイル
• CSSプロパティの順番を整頓する
• CSSやJSファイルの圧縮（minify）
• 画像を圧縮
• ブラウザをリロードし、動作確認 …など

それぞれのタスクを叶えるWebサービスやソフトウェアも充実していますが、全てを手動で行っていると時と場合によってムラが出やすいのが正直なところ…。

そこで活躍するのが「Gulp」のようなタスクランナーと呼ばれるツール。「ファイルが保存されたら」などの任意のタイミングで、あらかじめ登録されたタスクを機械的に実行してくれます。
単純に作業時間を短縮できることはもちろん、人的ミスを防いで成果物のクオリティを保つことにも繋がります。

今回はそんなGulpをお試しで使ってみた備忘録をお届けします。

今回の目標

当記事では、下記のようなタスクを実行するまでを目標にします。

• 編集用CSS「global.dev.css」が変更されたら、圧縮しつつ読み込み用の「global.css」にリネームして出力
• 上記のCSSや、HTMLが変更されるたびにブラウザをリロードする

プロジェクトディレクトリの構成は最終的にはこんな形になります。（★）でマークしたファイルは事前に準備しておくとスムーズです。

gulptest
 ┣ html ←ルートディレクトリ
 ┃  ┣ index.html ←トップページ（★）「/assets/css/global.css」を読み込む
 ┃  ┗ assets
 ┃     ┗ css
 ┃        ┣ global.dev.css ←編集用（★）
 ┃        ┗ global.css  ←読み込み用
 ┣ node_modules
 ┃  ┣ browser-sync
 ┃  ┣ gulp
 ┃  ┣ gulp-cssmin
 ┃  ┣ gulp-rename
 ┃  ┗ （…など。他多数割愛）
 ┣ gulpfile.js
 ┣ package.json
 ┗ package-lock.json

gulp.jsを使う準備

Node.jsのインストール

Node.jsの公式サイトから「最新版」のインストーラをダウンロードします。
インストーラを起動して、ウィザードに沿ってインストールを進めてください。

完了したらコマンドプロンプト（Macならターミナル）で下記のコマンドを実行して、バージョン情報が返ってくることを確認します。

node -v

Node.jsのインストールが完了すると、npmという機能が使えるようになります。
「Node Package Manager」の略で、Node.jsの機能（=パッケージ）を管理するためのものです。npmコマンドを介して、インストールなどの操作を実行します。

ここからはこのnpmも使いながら、Gulpのインストールを進めていきましょう。

package.jsonの準備

パッケージをインストールするにあたり、まずはプロジェクトディレクトリ配下にpackage.jsonファイルを準備します。
cdコマンドでプロジェクトディレクトリの場所まで移動します（パスは適宜変更）。

cd C:\Users\{ユーザ名}\Desktop\gulptest

npmの初期化コマンドを実行すると、ディレクトリ直下にpackage.jsonが作られます。

npm init -y

中身の例は下記のような感じ。-yオプションをつけたことにより、ひとまず全ての項目がデフォルトの設定値で生成されました。

{
  "name": "gulptest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Gulp本体のインストール

ここでようやくGulp本体をインストールします。下記のコマンドを実行してください。

npm install --save-dev gulp

しばらく待つと「node_modules」というフォルダができ、Gulpを含めた様々なパッケージが追加されました。また--save-devオプションにより、package.json内にもGulpのバージョン情報が登録されています。

▼package.json内に自動で追記

"devDependencies": {
  "gulp": "^3.9.1"
},

gulpfile.jsの作成

これでGulpを使う準備が整いました。
続いては、具体的に実行するタスク内容を設定するgulpfile.jsを作ります。

npm install --save-dev {パッケージ名}

//使うパッケージの宣言
var {変数} = require('{パッケージ名}');

//個々のタスク
gulp.task('{タスク名}', function(){
  //実行される処理
});

//watchタスク… タスク名は任意。「gulp.watch()」でファイルの状態を監視・タスク実行
gulp.task('watch', function(){
  gulp.watch('{監視したいファイルのパス}', [{実行するタスク名}]);
});

//defaultタスク… 「npx gulp」コマンドで実行するタスクを設定
gulp.task('default', ['{タスク名}', 'watch']);

npx gulp {タスク名}

npx gulp

実践：タスクを作ってみよう

それでは、今回の目標をもう一度確認します。

• 編集用CSS「global.dev.css」が変更されたら、圧縮しつつ読み込み用の「global.css」にリネームして出力
• 上記のCSSや、HTMLが変更されるたびにブラウザをリロードする

1）コマンドラインで必要なパッケージをインストール

上記の目標を達成するために必要なパッケージは「gulp-cssmin」「gulp-rename」「browser-sync」の3つ。スペース区切りで一気にインストールしてみました。
package.jsonに記録するため、--save-devオプションも忘れずつけましょう。

npm install --save-dev gulp-cssmin gulp-rename browser-sync 

2）gulpfile.jsでタスクを作成する

続いて、gulpfile.jsの編集です。
先ほどインストールした3つのパッケージに加え、前項でインストールしたGulp本体も宣言します。

var gulp = require('gulp');
var cssmin = require('gulp-cssmin');
var rename = require('gulp-rename');
var browserSync = require('browser-sync');

実行するタスクは下記のような形になりました。（参考サイトを後述します）

var baseDir = 'html/';
var assetsDir = 'html/assets/';

//CSSを圧縮、書き出しする「cssmin」タスク
gulp.task('cssmin', function() {
  gulp.src(assetsDir+'css/global.dev.css')//対象ファイルを指定。pipeで処理をつなげていく
  .pipe(cssmin())                         //圧縮
  .pipe(rename('global.css'))             //リネーム
  .pipe(gulp.dest(assetsDir+'css'));      //保存
});

//ブラウザと同期させる「browser-sync」「reload」タスク
gulp.task('browser-sync', function() {
  browserSync.init({
    server: {
      baseDir: baseDir,
    }
  });
});
gulp.task('reload', function() {
  browserSync.reload();
});

//watchタスク
gulp.task('watch', function() {
  //global.cssに変更があったら「cssmin」タスクを実行
  gulp.watch(assetsDir+'css/global.dev.css', ['cssmin']);
  //HTMLファイル,もしくはCSSファイルに変更があったら「reload」タスクを実行
  gulp.watch(baseDir+'**/*.html', ['reload']);//ワイルドカード「*」も使える
  gulp.watch(assetsDir+'css/global.dev.css', ['reload']);
});

//defaultタスク
gulp.task('default', ['cssmin','browser-sync','watch']);

3）実行

下記のコマンドで実行します。

npx gulp

目標どおりの動作が確認できれば成功です。実際の動作をGIFで撮ってみました。

少しわかりづらいですが、ファイルを変更・保存するとブラウザが自動で更新されます！
CSSの圧縮+リネームも水面下でちゃんとできています。

今回はここまで。なんとなく難しそう…と敬遠していたGulpでしたが、わかりやすいタスクから試してみるとモチベーションに繋がります！

Gulpのプラグインはまだまだたくさんあるので、冒頭で挙げたようなタスクをどんどん自動化して快適なコーディング環境作りを試みていきたいと思います。