TIPS

2017.09.15
vol.78

WEB

gulpを使って
ファイルの徹底効率化をはかる

vol.78 gulpを使ってファイルの徹底効率化をはかる

HTMLでサイトを構築するとき、デザインや見栄え等をチェックすることはもちろんですが、
成果物をより良くするために、ソースやファイルにチューニングを加えることがあります。
HTML、CSSのソースコード見直しや、整理、画像のファイル圧縮やHTMLのバリデーションチェック。 また、作る過程で要素が多くなったり、ページが増えたり、ヘッダーやフッターなど共通部分が何ページにも渡るケースがでてきます。
調整の過程で共通部分に修正が入ったとき、その部分に該当する全てのHTMLを編集して調整…などと言ったケースが発生することも稀ではありません。
テキストエディタで一括変換ができる場合もありますが、構造そのものに変更が入ったり、変更箇所が多岐に渡ると置換では要件を満たせないこともあります。
CMSやフレームワークを入れるほどではないけど、柔軟なソース管理ができてかつ、面倒な手間を省きたいとき、gulpが役に立ちます。

gulpとは

Node.jsをベースとしたビルドツールです。
sassやcoffeescriptのコンパイルなどを自動化するなどさまざまな手間を省いてくれるツールです。
ビルドの設定が簡単にカスタマイズできるため、いろんなプロジェクトに応じて臨機応変な対応できます。
設定のためのサンプルも、npm公式サイト(https://www.npmjs.com/)などを始め、第三者のデベロッパーが記事を載せているため、情報は比較的充実しています。
設定をJS構文で書くことになるため、多少難しいイメージがありますが、自分の目的さえはっきりしていればサンプルが見つかるため、すぐに設定することができます。
今回はWEB上の情報を集め、BOELで行う開発フローに当てはめて、
少々カスタマイズを加えながら設定をまとめていきます。

gulpをインストール

今回はmacの環境をベースに行っていきます。
macOS Sierra 10.12.6

node.jsをインストール

gulpを使うにはnode.jsのインストールが必要です。
下記サイトから実行ファイルがダウンロードできます。

https://nodejs.org/en/

アプリケーションをインストールする感覚で行えます。dmgを開き、手順に従ってインストールしてください。
node.jsをインストールした後、npmコマンドが実行できることを確認します。

バージョンが出てくればインストールに問題ありません。

またnode.jsについては、TIPS「node.jsアプリをLinuxサーバーで公開してみよう」でも紹介しています。
そちらもぜひご覧ください。

グローバルインストール

gulpはグローバルインストール、ローカルインストール二通りが必要です。まずグローバルインストールを実行します。

プロジェクトフォルダ内にpackage.jsonが生成されているのを確認してください。
プロジェクトフォルダ内でgulpのローカルインストールを行います。

インストールが完了したらgulpが実行できるか確認しましょう。

ざっくりGulp.js入門(Mac向け)
http://qiita.com/kazukichi/items/884a1379eea5918689ed
gulpとかnpmのこととか
https://protean.cc/getting-started-with-gulp-and-npm

gulpの実行

gulpを実行するためにはgulpfile.jsというファイルが必要になります。
プロジェクトフォルダに作成しましょう。

gulpでプロジェクトの設定

設定を進めていきます。
基本的には下記サイトを参考にさせていただいています。これを軸に、プロジェクトの特性に合わせ調整を加えていきます。

EJSの基本 – EJSでサイト制作効率化
https://www.to-r.net/media/ejs-01/

・gulp-ejsでHTMLの共通部分を分割化
・gulp-sassでscssをコンパイル
・gulp-plumber、gulp-notifyでエラー強制停止の防止を行う。リアルタイム通知
・gulp-autoprefixerでベンダープレフィックスを自動で付与
・gulp-webserverでローカルサーバーを立ち上げ。

※gulp-webserver
gulp-webserverで開発用Webサーバーを立ち上げる
http://labs.septeni.co.jp/entry/2015/10/26/233737

※gulp-plumber、gulp-notify
これからはじめるGulp(6):gulp-plumberとgulp-notifyを使ったデスクトップ通知
https://whiskers.nukos.kitchen/2014/12/06/gulp-notify.html

追加で下記にも対応します。
・imagemin-pngquantとgulp-imageminで画像圧縮
・gulp-html-validatorでHTMLバリデーションする

参考サイトのサンプルとあわせて下記のようなコードになります。

パッケージをインストールします。package.jsonを編集したら下記コマンドを実行します。

必要なパッケージが追加され、gulpfile.jsに書いた内容が実行できるようになります。
実際にどんなことができるか見ていきましょう。

ejsを軸にHTMLをテンプレート化

ejsではHTMLをテンプレート、分割化できます。
srcフォルダを作成し、パーツを作っていきます。

ejsフォルダを作成

index.ejs(コアファイル)を作成します。

ヘッダーとフッターを外部化

<% include _partial/header %>
<% include _partial/footer %>
これらはHTMLでは見覚えのない書き方です。 これはヘッダーとフッターのテンプレートを読み込む記述になります。
実際に_partialフォルダを作成し、header.ejsとfooter.ejsを作成します。

これでHTMLとなるファイルの準備はOKです。

scssのコンパイル

scssをコンパイルし、cssファイルにすることができます。
srcににscssのフォルダを用意し、scssのファイルを作成します。
下記のようにscssの形式で書いてみます。

画像の圧縮

gulpfile.jsには画像を圧縮する設定を行っています。
srcにimagesフォルダを作成し、画像を用意しておきます。

HTMLのバリデーション

生成されたHTMLのバリデーションを行った結果をファイルに書き出す設定をしています。
結果はvalidoutフォルダが自動生成され、その中に結果が表示されます。

gulpを実行してみる

上記の準備ができた段階でgulpを実行してみましょう。

distフォルダが自動生成され、成果物ファイルが構築されます。

画像も生成されていることを確認します。
元の画像とファイルサイズを比較してみてください。

HTMLのプレビューを下記URLから確認することができます。
http://localhost:8000/

gulp実行中は上記URLからプレビュー閲覧すると、HTML、CSSを変更したときにブラウザがリフレッシュされ、リアルタイムで更新確認できます。

まとめ

以上gulpの基本的な使い方を実務ベースで構築してみました。
HTMLの外部分割化、scssの自動コンパイル、画像の圧縮、変更のリアルタイムプレビューなどひとつひとつ見ると細かい部分ではありますが試行、プレビューは制作の際に何度も繰り返す処理です。
小さいことでも積み重なれば、時間と労力を大きく節約することができます。
また、これらの設定はほんの一部の機能に過ぎず、他にもカスタマイズ方法は多々あります。
今度はプロジェクトにjsファイルもインクルードした想定でより使いやすくカスタマイズしていけたらと思います。

参考サイト
HTMLバリデーション
https://www.npmjs.com/package/gulp-html-validator
画像圧縮
http://blog.tsumikiinc.com/article/20150226_gulp-imagemin.html

  • CATEGORY
  • カテゴリ
  • RECENT POSTS
  • 新着TIPS
  • RANKING
  • ランキング
  • ARCHIVES
  • アーカイブ
2017
October (
September (
August (
July (
June (
May (
April (
February (
January (
2015
December (
November (
October (
August (
July (
April (
March (
February (
January (

お仕事の依頼やご相談

企画・編集、情報設計、デザイン、アートディレクションなどクリエイティブワークを得意とするブランディングオフィスです。ブランディング・Webサイト・印刷物、システム開発等を通じ、ビジネス価値向上をお手伝いします。

オンライン見積もりフォーム

さまざまなブランディング事案に対応します。
お気軽にご依頼ください。