searchclose
right

gulp入門 ~ ウェブ制作の面倒な作業を自動化しよう ~

カテゴリー
Web制作
ツール
タグ
gulp
制作担当
2017.08.29

Gulp入門のサムネイル

 

Web制作の裏側では、非常に多くの作業が存在します。特に現在のウェブサイトにおいては、PCだけでなくモバイルのレイアウトも用意する必要があり、モバイルの貧弱な通信速度でもウェブサイトをより早く表示させるために、以下の作業を行っている方も多いのではないでしょうか？

  • CSSのブラウザ互換・結合・圧縮
  • JavaScriptの結合・圧縮
  • 画像のロスレス圧縮

 

どれも手動で行うとなると非常に時間がかかる厄介な作業です。そういった煩わしい作業を、自動化するために生まれたのが『タスクランナーツール』です。

タスクランナーツールとは数ある自動化ツールの総称です。今回はその中でも人気のある『gulp』について解説していきたいと思います。

gulpとは？

『gulp』はHTML・CSS・JavaScriptコーディングの分野(=フロントエンド)に特化したタスクランナーツールです。 似たようなツールはいくつかありますが、gulpはその中でも以下の特徴があります。

  • Node.js 上で動作 (Windows & Macの両方で使用できる)
  • 設定ファイルがJavaScriptなのでフロントエンドの方々が扱いやすい
  • 同時に複数の処理を実行できる(非同期処理)ので処理速度が早い
  • プラグインが豊富

 

処理速度が早いことも強みですが、gulpは何よりプラグインが豊富に存在し、コミュニティによる活動が盛んで日々ツールの強化が行われているのが強みです。

gulpで出来ること

gulpのプラグインを活用すれば、以下のようなことが完全に自動化できます。

  1. SassからCSSへ自動コンパイル
  2. CSSへのコンパイル時にCSSプレフィックスを自動付与
  3. CSSの記述ミスをリアルタイム監視
  4. CSSの複製・圧縮
  5. Sassのソースマップ自動作成
  6. 画像の複製・ロスレス圧縮
  7. JavaScriptの複製・結合・圧縮
  8. and more ...!

今回は入門編ですので、まずは習うより慣れろということで、上記の1から6までを全て自動化するgulpの設定ファイルを予め用意した上で使い方を解説していきます。

gulpのインストール前に… 事前準備

gulpはNode.js上で動作するプログラムなため、使用する環境に合わせてNode.jsをインストールする必要があります。

今回はNode.jsが既にインストールされていることを前提として解説を進めてまいります。

もしまだNode.jsがインストールされていないのであれば、インストール手順をWindows・Mac別に記事にしていますので、お役立ていただければ幸いです。

Node.jsのロゴ

 

gulpのインストール

gulpのインストールにはNode.jsのnpmというパッケージ管理システムを使用します。npmコマンドは全てターミナルエミュレータ経由で行いますので、先に起動しておきます。

gulpはマシン上のどこでも利用できるようになるグローバルインストールと指定したディレクトリ配下でのみ利用できるようにするローカルインストールがあります。今回は用意した設定ファイル上、どちらも行います。

  1. gulpのグローバルインストールを行います。

    
$ npm i -g gulp

    ※上記コマンドは$ npm install -g gulpの省略コマンドです。どちらも同じ命令を実行します。

  2. gulpのローカルインストールを行うには作業するディレクトリでコマンドを実行する必要がありますので移動します。

    
$ cd <<作業ディレクトリ>>
  3. 次にnode.jsのパッケージを管理するpackage.jsonを作成します。今回は必要なプラグインの設定が記述されたpackage.jsonを用意していますので、以下の記述をpackage.jsonとして保存し、作業ディレクトリに置いてください。

    package.jsonの中身

    
{
  "name": "GulpDeveloperKit",
  "version": "1.0.0",
  "author": "",
  "license": "MIT License",
  "devDependencies": {
    "del": "^3.0.0",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^4.0.0",
    "gulp-changed": "^3.1.0",
    "gulp-concat": "^2.6.1",
    "gulp-imagemin": "^3.3.0",
    "gulp-notify": "^3.0.0",
    "gulp-plumber": "^1.1.0",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^3.1.0",
    "gulp-sourcemaps": "^2.6.0",
    "gulp-uglify": "^3.0.0",
    "gulp-watch": "^4.3.11",
    "imagemin-mozjpeg": "^6.0.0",
    "imagemin-pngquant": "^5.0.1",
    "require-dir": "^0.3.2"
  }
}

  4. 最後にgulpと関連するプラグインをpakage.jsonから読み取ってローカルインストールします。以下のコマンドを実行します。

    
$ npm i

 

これでgulpのグローバルインストールとローカルインストール、プラグインのインストールが完了しました。ローカルインストール後には、ローカルインストールのために移動したディレクトリに『node_modules』ディレクトリが作成されていると思います。

gulpの設定ファイルを用意

今回は既に設定ファイルを用意していますので、下記からインストールして作業ディレクトリへ保存しましょう。

gulpの設定ファイルをダウンロード

同封しているファイルは以下のようになります。


  /作業ディレクトリ/
  ├ gulp_config/
  │ ├ tasks/
  │ │ ├ clean.js
  │ │ ├ img.js
  │ │ ├ rebuild.js
  │ │ └ sass.js
  │ └config.js
  ├ gulpfile.js
  └ package.json  // ついでに入れています

これにプラスして、『src』ディレクトリと『dest』ディレクトリを作業ディレクトリ直下に作成してください。

最終的には作業ディレクトリの構成は以下の画像のようになると思います。

作業ディレクトリの構成

これでgulpを使用する準備ができました。では実際に使用してみましょう。

gulpを使ってSassの自動コンパイル

まずはSassをCSSへ自動コンパイルできるか試してみます。

Sassファイルの用意

今回用意したgulpの設定ファイルは、実際にファイルを編集する編集用ディレクトリ『src』と、各種自動化タスクが実行された後のファイルを保存する本番ディレクトリ『dest』を分けて使うよう作られています。

Sassファイルは編集用ディレクトリ『src』配下へ『scss』ディレクトリを作成して配置します。

今回用意したgulpの設定ファイルでは、Sassファイルの拡張子がSCSS形式しか対応していませんので、その点だけ留意してください。

以下、実際にstyle.scssを/src/scss/配下に配置したイメージ図です。

 

gulpの実行

実際にgulpを動かしてみます。

  1. ターミナルエミュレータで作業ディレクトリのgulpfile.jsがある階層まで移動しましょう。

    
$ cd <<作業ディレクトリ>>

  2. gulpを起動します。以下のコマンドを実行してください。

    
$ gulp

  3. すると以下のようにコマンドが走り、待機状態になります。

    
$ gulp
[17:39:23] Using gulpfile /<<作業ディレクトリまでの階層>>/gulpfile.js
[17:39:23] Starting 'rebuild'...
[17:39:23] Starting 'sass'...
[17:39:23] Starting 'js'...
[17:39:23] Starting 'cleanimg'...
[17:39:23] Starting 'img'...
[17:39:23] Starting 'html'...
[17:39:23] Starting 'php'...
[17:39:23] Starting 'watch'...
[17:39:23] Finished 'watch' after 11 ms
[17:39:23] Finished 'rebuild' after 134 ms
[17:39:23] Starting 'default'...
[17:39:23] Finished 'default' after 1.33 μs
[17:39:23] Finished 'cleanimg' after 125 ms
[17:39:23] gulp-imagemin: Minified 0 images
[17:39:23] Finished 'img' after 126 ms
[17:39:23] Finished 'php' after 206 ms
[17:39:23] Finished 'html' after 477 ms
[17:39:23] Finished 'js' after 596 ms
[17:39:23] Finished 'sass' after 627 ms

 

これでgulpは動作中となりました。

style.scssを編集してgulpの動作を確認してみる

前置きが長くなりましたが、style.scssを編集してみて、gulpがどんな役割をしているのか見てみましょう。

以下のようにstyle.scssへスタイルを追加してみます。

style.scss


@charset 'utf-8';

.colmn {
display: flex;
justify-content: space-between;
}

するとsrcディレクトリへ自動的に『css』ディレクトリが追加され、style.cssが出力されます。

作成されたstyle.cssをエディタで開いてみます。


.colmn {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

自動的にベンダープレフィックスが追加されているのが分かります。

また、destディレクトリにも『css』ディレクトリが追加され、その配下には『maps』とstyle.min.cssが作成されています。

『maps』には『style.min.css.map』というSass向けのソースマップが作成され、destのスタイルシートは改行やスペースが削除された圧縮ファイルとなっています。

この段階で既に以下の自動化がなされていることが分かります。

  • SassからCSSへ自動コンパイル
  • CSSへのコンパイル時にCSSプレフィックスを自動付与
  • CSSの複製・圧縮
  • Sassのソースマップ自動作成

次に、以下のようにstyle.scssへわざと記述ミスをしてみます。 


@charset 'utf-8';

.colmn {
  display: flex
  justify-content: space-between;
}

どこを変更したか分かりますでしょうか？実はflex以降のセミコロンを削除しています。この状態ではCSSはミスと見なされ、本番環境へアップロードしてしまうと正しく認識してくれません。

しかし現在のgulp設定ではミスの自動監視が働いています。

ミスした状態でファイルを保存すると、右上にエラーのポップアップが現れ、コンパイルは実行されません。

これにより、ミスをしても本番環境へはミスが反映されない且つ、ミスが発生していることをポップアップログで分かるようになります。

画像の複製・ロスレス圧縮を確認してみる

最後に画像の複製・ロスレス圧縮が行われているか確認してみます。

gulpが実行されており待機状態になっているのを確認し、『src』ディレクトリ配下に『img』ディレクトリを作成してそこに画像を格納してみましょう。

※使用した画像はpixabayからいただきました。

 

すると自動的に『dest』ディレクトリへ画像が複製され、さらにロスレス圧縮により画像の容量が53KBから28KBに削減されていることが分かります。

まとめ

タスクランナーツールを使えば上記のような面倒なタスクを、意識せずに完全に自動化することができます。今回はgulpの設定ファイルについては解説をあえてしませんでしたが、設定ファイルを参考にしていだいて、gulpのカスタマイズを自分好みにすることも自由です。この記事がウェブ制作の効率化について、お役に立てば幸いです。

関連記事
次世代のCSS記法、Sass入門 〜 実行環境構築から基本的な機能について 〜
2017.06.08
公式Facebook
GMOソリューションパートナー株式会社