という訳で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にあらかじめ記述しておく必要があります。
全部盛り
gulp previewとgulp sass, gulp coffeeを合わせたタスクです。全部盛りです。
gulp develop
./sass/ディレクトリと./coffee/ディレクトリの中を監視してSassコンパイルとCoffeeScriptコンパイルを断続的に行いつつ、ローカルサーバーでプレビューします。
まとめ
これにてようやく、gulp.jsとSassの導入が完了です。
環境構築とセットアップさえしてしまえば『何も考えなけくていいから、とりあえずgulp sassして』と伝えるだけでいいんですね。
これでもだいぶ簡単にしたんですが、まだまだ環境構築が手間ですね。申し訳ない。
楽するのも楽じゃないですよ、まったく。
私からは以上です。
前編はこちら、
普通のWebデザイナーがSass+gulp.jsでいい感じのコーディング環境を手に入れるまで ～前編～ - 無駄と文化
tasksリポジトリはこちら、
todays-mitsui/tasks · GitHub
