staff - blog post

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

Posted by NAGAYA on

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

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"
}

package.jsonって何に使うの?

このあとパッケージのインストールを進めていく際に、「どのパッケージに依存しているのか」を記録しておくのがpackage.jsonの大きな目的です。

例えばGitを使って複数人で開発する場合、パッケージそのものをGit管理下に含めてしまうのはスマートではありません。
つまり各自の環境でインストールを実施することになるのですが、このとき必要なパッケージが書かれたpackage.jsonさえあれば、その内容を元にnpmがまとめてインストールをしてくれるというわけです。

npmやpackage.jsonについては、こちらの記事が参考になりました。
参考:Node.js のパッケージ管理ツール npm の作り方と package.json の使い方 | phiary

Gulp本体のインストール

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

npm install --save-dev gulp

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

package.json内に自動で追記

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

上記のインストール方法は「ローカルインストール」と呼ばれ、今いるディレクトリ配下のみでパッケージが有効になる方法です。
PC本体に依存関係を持つと、これも複数人での開発においてトラブルになる可能性が高いということで、「グローバルインストール」は避けることにしました。
参考:[Node.js] npm installするときはどのパッケージもローカルインストールで十分

gulpfile.jsの作成

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

はじめに:gulpfile.jsの基本の書き方

最初にタスク作成~実行までの大まかな流れを確認しておきましょう。
gulpfile.jsの中身はタスク内容により大きく異なりますが、定型的に使うであろう部分のみピックアップしてみました。

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

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

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

まず冒頭でインストールしたパッケージを宣言します。
続いて個々のタスクを作成し、必要に応じて「watch」タスクや「default」タスクなどに分けて登録しておきます。

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

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

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

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

3)実行

コマンドラインから実行すると、gulpfile.jsの内容をもとにタスクを実行します。
個々のタスクを実行したい場合はnpx gulpに続けてタスク名を。

npx gulp {タスク名}

あるいは、「default」タスクで設定したタスクはnpx gulpのみで実行できます。
2)で記述しているように複数のタスクを設定可能なので、標準で実行したいタスクは「default」内にまとめておきましょう。

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の圧縮+リネームも水面下でちゃんとできています。

今回ご紹介したタスクの書き方はほぼ参考サイトから拝借しました。
詳細な解説は割愛しましたが、下記のような挙動をイメージすれば記述内容に合点がいきそうです。

  • defaultタスクに設定した3つのタスクが実行されている
    • browser-sync」でブラウザと同期(http://localhost:3000といったURLで新規タブが開きます)
    • cssmin」で初回のCSS圧縮+リネームを実行
    • watch」で継続的にファイルの変更を監視し、「watch」内に設定した「cssmin」「reload」を都度実行

▼「cssmin」タスクの参考
タスク自動化ツール「gulp」 を使って制作時間を短縮しよう | Webクリエイターボックス

▼「browser-sync」「reload」タスクの参考
gulpでブラウザのリロードを自動化してみた - Qiita

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

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

Let's talk!
PageTop

Copyright © GRANFAIRS inc. All Rights Reserved.