CREATOR BLOG

gulp入門その3―こまごま便利なこと

2015/02/27
atsuko.a
  • このエントリーをはてなブックマークに追加

こんにちは、フロントエンドエンジニアのあつこです(ΦωΦ)
まさかgulpネタをこんなに引っ張ることになるとは思わず、アイキャッチは使いまわしです。
今回は、細かい便利な機能をgulpに乗せてみましょう。

今までの記事はこちら

もくじ

  • 同期処理をする
  • ローカルサーバを立ててライブリロードする
  • CSSのminifyしたりプロパティを並び替えたりする
  • package.jsonでモジュールを管理する
  • まとめ

※今回は手順にプラグインのインストールを含めません。
インストール方法は前回・前々回の記事を参照にしてください。

同期処理をする

初回からさんざん書く書く言っていた同期処理です。
そもそもgulpは非同期処理なのでタスクの完了が早いわけですが、どうしても同期的に処理したい場合もあります。
そこでrun-sequenceを使いましょう。
このプラグインを使うと複数タスクの並列/直列処理が設定できます。
例として、↓の図のような処理遷移をしてほしいとします。
150227_01

点線部分のsass/guide/copyはそれぞれ並列(=非同期処理)です。
つまり、lint→sass/guide/copy→combの順番で処理したいということ。

buildタスクを実行すれば、lint→sass/guide/copy→combと処理してくれます。
基本は直列ですが、[]で囲った部分が並列処理になってくれます。

直列処理ができるからと言って無闇矢鱈に使っていると処理が当たり前のように重くなるので、ご利用は計画的に。

ローカルサーバを立ててライブリロードする

ajax処理やプラグインの関係で、ローカル環境では上手く動かないときにはローカルサーバを立てましょう。
gulp-webserverを使います。

基本的にはこれでOK、localhost:9000に仮想サーバの出来上がりです。
ライブリロードの有無も選べるので便利、ファイルの変更があると自動的にブラウザを更新してくれます。
他にもオプションがあるので詳しくはそちらを。

こんな感じでデフォルトタスクに監視タスクと一緒に突っ込んでおくと、
デフォルト実行するだけでファイルの監視をしつつローカルサーバをたててブラウザで開いてくれます。便利!
ちなみにnode.jsで動いているので、PHPはこのローカルサーバでは動きません。

CSSのminifyしたりプロパティを並び替えたりする

CSSのminifyにはgulp-minify-css
プロパティの並び替えにはgulp-csscombをそれぞれ使います。

gulp-minify-css

まずは、minifyから。
node.jsのライブラリclean-cssをラッパーしたプラグインのようです。

特殊コメント(/*! */)以外のコメントを削除しつつminifyしてくれます。
↑のように改行を保持したりだとか、オプションがいろいろあるようです。

JSのminifyはこちら→gulp-uglify

gulp-csscomb

次にプロパティの並び替え
こちらもcsscombというツールのラッパー的なやつ。

タスク自体はこれでOKですが、実際どんな順番で並び替えたいかの設定が別途必要です。
json形式の設定ファイル.csscomb.jsonをgulpfile.jsと同じディレクトリに入れておけば大丈夫。
デフォルトで3つ用意されてるので、そこから引っ張ってくるといいかも。

sort-orderの辺りを参考に。
もちろん自分で設定するもよし。

ちなみに、プロパティの並び替えだけでなくホワイトスペースの除去なども一緒にやってくれます。
そこら辺の設定値は24個あるのですが、ここから好みの設定をぽちぽちしていくと最後にまとめて吐き出してくれるのでコピペすると便利ヽ(=´▽`=)ノ

150227_02
好きな吐き出し形式をを選んで、
150227_03
出てきた設定を.csscomb.jsonにコピペ。らくちんですね(ΦωΦ)

package.jsonでモジュールを管理する

正確にはgulp自体の機能ではなく、node.jsのモジュール全体の話ですが。
初回の記事にて「package.jsonを利用することで他のプロジェクトにも転用できるようです」と書きましたが、実際の方法を見てみましょう。

package.jsonを用意します。

ターミナルから、新規にgulpを使用したいディレクトリに移動しつつ↓を実行します。

すると、package.jsonに記載されているプラグインがごそっとインストールされます。

こうすると、わざわざnode_moduleディレクトリを移動しなくていいので便利。
バージョン管理ツールを使用しているなら、gulpfile.jsとpackage.jsonがあればタスクの共有ができます。

まとめ

3回にわたってgulp周りの細々した事をまとめてみました。
今回までの内容ができるとひとまずフロントエンドのコーディングは楽になる、かも?

一旦gulp入門は完結ですが、他にもできることがたくさんあるのでそのうちまとめてみたいと思います。
それでは今日はこのへんで!

Recent Entry

CSSの単位まとめ pxからvm/vh/vmin/vmaxまで

レスポンシブHTMLメールを作ってみての感想

CSSのリファクタリングでした5つのこと

大人が読んでも頭を使う絵本の紹介

サイト内にうまくInstagramを取り入れてるサイト11選

Category

Archive