普通のWebデザイナーがSass+gulp.jsでいい感じのコーディング環境を手に入れるまで～後編～

という訳でgulp.jsを使ってのSass導入後篇です。

前編はこちらです、
普通のWebデザイナーがSass+gulp.jsでいい感じのコーディング環境を手に入れるまで～前編～ - 無駄と文化

前回までで、諸々の環境構築とtasksリポジトリをPCのローカルに持ってくるところまでが済んでいると思います。
ここまでくればgulpタスクを実際に実行するところまでもう少しです。

`gulpfile.js`と`package.json`を移動させる

さて、今回のテーマはWebデザイナーのためのgulp.jsとSass導入ですよね。

普通、Web制作の会社に勤めるデザイナーは日々複数の案件にたずさわっているんではないでしょうか。
三井が用意したgulpタスクは、そのように複数案件にまたがって使う事を想定しています。

gulpfile.jsの配置などにも若干のコツがあります。
以下を参考にしながらtasksディレクトリの配置とgulpfile.js, package.jsonの移動をしてください。

例えば、進行中の3つの案件(A案件, B案件, C案件)のディレクトリがprojectsというディレクトリの中にまとめられている場合...

projects
 ├─ project_A
 │　  ├─ sass
 │　  ├─ css
 │　  └─ index.html
 │
 ├─ project_B
 │　  ├─ sass
 │　  ├─ css
 │　  └─ index.html
 │
 └─ test
 　　  └─ project_C
  　　　　  ├─ css
  　　　　  ├─ sass
  　　　　  └─ index.html

まず、tasksディレクトリを置く場所はprojectsディレクトリの直下にしてください。

projects
 ├─ project_A
 │　  ├─ sass
 │　  ├─ css
 │　  └─ index.html
 │
 ├─ project_B
 │　  ├─ sass
 │　  ├─ css
 │　  └─ index.html
 │
 ├─ test
 │　  └─ project_C
 │　　　　  ├─ css
 │　　　　  ├─ sass
 │　　　　  └─ index.html
 │
 └─ tasks  <- cloneしたtasksディレクトリをこの位置に配置
 　　  ├─ .csscomb.json
 　　  ├─ config.js
 　　  ├─ gulpfile-coffee.js
 　　  ├─ gulpfile-default.js
 　　  ├─ gulpfile-develop.js
 　　  ├─ gulpfile-preview.js
 　　  ├─ gulpfile-sass.js
 　　  ├─ gulpfile.js
 　　  └─ package.json

そしてtasksディレクトリの中のgulpfile.jsとpackage.jsonだけを一階層上に移動します。

projects
 ├─ project_A
 │　  ├─ sass
 │　  ├─ css
 │　  └─ index.html
 │
 ├─ project_B
 │　  ├─ sass
 │　  ├─ css
 │　  └─ index.html
 │
 ├─ test
 │　  └─ project_C
 │　　　　  ├─ css
 │　　　　  ├─ sass
 │　　　　  └─ index.html
 │
 ├─ tasks
 │　  ├─ .csscomb.json
 │　  ├─ config.js
 │　  ├─ gulpfile-coffee.js
 │　  ├─ gulpfile-default.js
 │　  ├─ gulpfile-develop.js
 │　  ├─ gulpfile-preview.js
 │　  └─ gulpfile-sass.js
 │
 ├─ gulpfile.js   <- この2つのファイルをtasksディレクトリから出して
 └─ package.json  <- この位置に配置する

と、これにてファイルの配置はOKです。

タスク実行に必要なパッケージのインストール

『またインストールか...』と思うかも知れませんが、前回パッケージマネージャーを導入しているのでコマンド一つで済みます。
必要なパッケージのリストはpackage.jsonの中に記述しておきました。

コマンドラインを開いてpackage.jsonのある階層に行きましょう。

npm install

Windowsの場合、コマンドプロンプトを管理者として実行しなければいけないかも知れません。

しばらく待つと必要なパッケージが全てインストールされ、セットアップまでされて使える状態になります。

この後いよいよ初めてのgulp.js実行です。

各プロジェクトディレクトリでgulp.jsを走らせる

ついに全ての下準備が完了しました。
プロジェクトのディレクトリに移動してSassのコンパイルを試して見ましょう。

Sassコンパイルのためにはsass-compileタスクを実行します。

gulp sass-compile

このコマンド一つで

Sassのコンパイル
CSSプロパティを良い感じに並べ替えて整形する
必要なprefixを付けて、不要なprefixは外す
remのフォールバック

などの処理を一括で行ってくれます。

ちなみに、対象になるファイルは./sass/ディレクトリに入っている.sassファイルと.scssファイルのみです。
コンパイルした結果は./css/ディレクトリに入ります。

ファイルの変更監視と自動コンパイル

sass-compileタスクはいろいろな処理を一括で実行してくれて便利ではあるんですが、元のSassファイルを更新する度にタスクを実行するのが面倒でもあります。

そこで./sass/ディレクトリを監視して、ファイルに変更がある度に自動でコンパイルを実行するタスクを用意しておきました。
それがsassタスクです。

gulp sass

このタスクを実行すると、gulpが./sass/ディレクトリの中のファイルを監視してくれます。
試しに適当な.scssファイルを変更して上書き保存すれば、その度にコンパイルが行われて./css/ディレクトリに最新のファイルが入っているのが分かるでしょう。

そんな訳で、今後Sassを使ってコーディングをするときには、コマンドラインで目的のプロジェクトディレクトリに移動してgulp sassするだけでOKという事になりました。めでたい。

あとは思う存分デザインとコーディングに集中してください。

おまけタスクたち

その他にも三井が個人的によく使うタスクを良い感じに突っ込んどきました。

以下のようなタスクがあるみたいです。

CoffeeScriptのコンパイル

1回限りのコンパイルなら

gulp coffee-compile

ディレクトリを監視しながらの自動コンパイルなら

gulp coffee

を実行してください。

./coffee/ディレクトリの中の.coffeeを対象にします。コンパイル後の.jsファイルが入るのは./js/フォルダです。

Sass & CoffeeScript

SassとCoffeeScriptを平行して編集するときのためにgulp sassとgulp coffeeを合わせたタスクを用意しています。
デフォルトタスクにしてあるので、

gulp

これだけで実行されます。便利ですね。

SassとCoffeeScriptのどちらか一方しか書かない場合もこのコマンド走らせときゃいいかな、って思わなくもないです。大は小を兼ねますからね。

Local Server

PHPにはビルトインウェブサーバーを立ち上げる便利機能が備わっています。
それをわざわざgulpタスクにしたのが

gulp preview

です。

実行するとカレントディレクトリをDocument Rootにしてローカルウェブサーバーが立ち上がります。
ブラウザでhttp://localhost/にアクセスすればローカルファイルがプレビューできるはずです。

.phpファイルがPHPとして実行されますし、本番環境とローカルでのルート相対パスの違いなどを気にしなくても良くなるので良い感じですね。

※ 注意

環境に応じてPHPの実行ファイルとphp.iniの場所を指定する必要があります。 tasks/config.jsにオブジェクト形式で絶対パスを記述します。
Windows用,Mac用それぞれのサンプルとしてconfig.js.win-sampleとconfig.js.mac-sampleを用意しているので適宜拡張子を変更して使用してください。

また、Apacheが立ち上がっている訳ではないので、mod_rewrite等Apache固有の機能は利用できません。
.htaccessでPHPの設定を変更しているものについても反映されません。PHPの設定はphp.iniにあらかじめ記述しておく必要があります。