というわけで、使ってみようと思います。

(2016.07.28追記)
gulp.task(‘****’, function() {})の中で、returnをしないと、処理が不完全になってしまうことがありました。
returnがなければ、非同期で速く処理できると思っていたのですが、処理が多く走りすぎると、不完全なファイルになってしまうので、return入れた方が安全です。

(2014.11.20追記)
gulp-sassの不具合なのか、Sassがうまく動いていないことに気がつきました。
gulpfile.jsのsass部分を修正しました。

gulp-sassで.sassファイルを使うときの注意点

タスクランナーとは

Node.jsRubyにある便利なツールを自動で実行することができます。

  • JavaScript/CSS/HTMLの圧縮
  • Sass
  • CoffeeScript
  • CSSスプライト
  • 画像の軽量化

などなど。

ほかにも多数ありますが、このような機能を自動化できます。

Grunt(グラント)とGulp(ガルプ)

現在、有名なタスクランナーと言えば、この二つです。
基本的にYeomanのジェネレータでは、Gruntが使われています。

Gruntのあとに出てきたのが、Gulpです。

機能的は、ほとんど同じですが、Gruntのほうがプラグインが多く、Gulpのほうが処理が速い、と言われています。

今回は、Gulpでいこうと思います。

理由は、Gruntfileの書き方がどうしても慣れなかったからです。
それぞれ、GruntfileGulpfileというファイルに、使いたいプラグインなどの設定を書くのですが、いろいろと長くなってしまいます。

私の場合、Gruntfileの入れ子具合に、ちょっと厳しかったです。

Gulpは、jQueryのようにチェーンメソッドで書けるのが、分かりやすかったのかもしれません。
そんなわけで、Gulpにしました。

gulp.js The streaming build system

GRUNT The JavaScript Task Runner

欲しい機能を考えよう

欲しい機能は、人それぞれだと思います。
私の欲しい機能を考えて、Gulpfileを作成してみたいと思います。

私がよく行う案件としては、html/css/jsのコーディングを行い、一式を納品することが多いです。

そのあとで、クライアントが更新したり、モックとして、動的に組み込んだりすることがあります。

ということは、ソースの圧縮にはこだわらない方が良いですね。
どちらかというと、できるだけ分かりやすく、美しいコードを保ちたいです。

しかし、SassCoffeeScriptを全く使わないのは、面白くないので、使える状態にしておきたいです。
ベンダープレフィックスを自動でつけるのも良いですね。

cssスプライト画像の軽量化は、自動でできるのならそうしたいですね。
(その後、cssスプライトのプラグインは上手くインストールできなかったので、断念しました)

パーツの共有化もしたいです。phpのincludeみたいにしたいですね。
でも、最終的には静的なhtmlを吐き出したいです。

こんな感じで、いきましょう。

プラグイン 機能
gulp-sass Sassのコンパイル
gulp-autoprefixer 自動でベンダープレフィックスを付ける
browser-sync ブラウザを自動更新、複数のブラウザに同期
gulp-plumber エラー時に監視を止めない
gulp-file-include ファイルをインクルード
gulp-prettify HTMLを整形する
gulp-cssbeautify CSSを整形する
gulp-jsbeautifier JavaScriptを整形する
gulp-changed 変更したファイルだけ反映する
del ファイルの削除

私の環境では、gulp-imageminが動かせなかったので、個別にしました。

プラグイン 機能
imagemin-gifsicle gifを軽量化する
imagemin-jpegtran jpegを軽量化する
imagemin-optipng pngを軽量化する
imagemin-svgo svgを軽量化する

いつものNode.jsのインストール

Windowsは、公式サイトから実行ファイルをダウンロードしてインストールしましょう。

Macも同じようにインストールできますが、Homebrewというパッケージ管理ツールを使用しても良いです。

node.js

Homebrew

Gulpをインストール

Node.jsが用意できたらGulpをインストールしましょう。

WindowsならDOSコマンドプロンプト、Macならターミナルからコマンドを実行していきます。

Gulpを使うディレクトリを作成しましょう。

package.jsonを作成します。基本的には、全てEnterで大丈夫です。

Gulpのバージョンを確認すると以下のようになります。

Gulpを使うディレクトリにもGulpをインストールする必要があります。

Gulpのプラグインなどのインストール

CoffeeScriptのコンパイル

Sassのコンパイル

自動でベンダープレフィックスを付ける

ブラウザを自動更新、複数のブラウザに同期

エラー時に監視を止めない

ファイルをインクルード

HTMLを整形する

CSSをきれいにする

JavaScriptを整形する

変更したファイルだけ反映する

ファイルの削除

gifの軽量化

jpegの軽量化

pngの軽量化

svgの軽量化

gulpfile.js

ディレクトリ構成はこんな感じにしました。

appにファイルを作成して、distに納品データが入るようにします。
incには、インクルードしたいファイルを入れて、gulp-file-includeでファイルをインクルードします。

それでは、gulpfile.jsを書きましょう。
package.jsonと同じところに置きましょう。

gulpfile.js

あとは、コマンドを叩けば、ブラウザが立ち上がり、ディレクトリの監視など全て自動で行われるはずです。

使い込んでみて、追記などあれば、更新していきます。
(不具合などあれば、教えていただけるとありがたいです)

現場のプロが教えるWeb制作の最新常識[アップデート版] (知らないと困るWebの新ルール)
久保 知己 酒井 優 塚口 祐司 前川 昌幸
エムディエヌコーポレーション (2016-06-01)
売り上げランキング: 11,807