無駄と文化

実用的ブログ

トップ > Sass

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

Sass CSS 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にあらかじめ記述しておく必要があります。


全部盛り

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

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

Sass CSS gulp.js

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

弊社ではサイト制作も行っていますが、サイトの制作時にいわゆるデザインとコーディングでの分業(役割分担)をしていません。
肩書きとしては「Webデザイナー」のみしかないので、Webデザイナーであればデザインとコーディングの両方ができて初めて一人前です。

とはいえ、人によってデザインが得意/コーディングが得意といった得意分野の差は出てきます。
コーディング畑の人が唐突に「Sass使ってWeb書こう！」と提案したとしても、デザイン畑の人から見ればどうしてもとっつきにくいのが現実のようです。


さて、そんな普通のWebデザイナーにSassを使ってもらいたくて、Sassの導入するのに一番いい感じの環境は何なのか一人で考え続けてきました。
結論として、表題にもあるように『gulp.jsのタスクとしてSassを動かすように準備してそれを使ってもらう』というところに至ったわけです。

経緯としては、

  • 設定を裏側に隠して簡単にしやすい
  • 他にもいろいろ応用したくなった時に拡張しやすい

みたいな事を見据えています。

まぁウンチクはいいとして、今回は(社内向けに)Sass+gulp.js導入の手助けになるように導入の手順を書いていこうと思います。


対象読者

以下の読者を対象に書いています。

  • Sassを使えと周囲から言われているが、まず何をしていいか分からない人
  • gulp.jsなんて聞いたことないよという人
  • ターミナル(コマンドプロンプト)なんて立ち上げたことないよという人
  • ググってみたけどいろいろ情報出てきすぎて逆に意味が分からないという人
  • 弊社のデザイナー

すでにSassを使いこなしている人や、自分でググって自分でなんとかできる人はSassの公式サイトやgulp.jsの公式サイトを当った方が早いと思います。


初めてのgulpタスク実行まで、準備すること

まずは事前準備の全体像を見ておきましょう。
すでに完了している項目はスキップしてもらって結構です。

  1. ターミナル(コマンドプロンプト)の立ち上げ方を知る
  2. 基本のコマンドpwd(cd), ls(dir), cdを知る
  3. Rubyのインストール
  4. Sassのインストール
  5. Node.jsのインストール
  6. gulp.jsのインストール
  7. GitHubからtasksリポジトリをダウンロード(clone)


1. ターミナル(コマンドプロンプト)の立ち上げ方を知る

準備手順の3以降は主にターミナル(コマンドプロンプト)を立ち上げてコマンド入力で進めていきます。
ターミナル(コマンドプロンプト)って何？という人のために解説すると、下記のようないわゆる『黒い画面』のことです。

f:id:todays_mitsui:20150818002608g:plain

さて、前述の黒い画面の呼び名ですが、
Macでは「ターミナル」という呼び名になっています。Windowsでは「コマンドプロンプト」ですね。


1.1 Macでターミナルの立ち上げ方

Spotlightで「ターミナル」または「Terminal」と入力すると立ち上げる事ができます。

[]

Sassやgulp.jsを活用していくとそれなりの頻度でターミナルを使う事になるのでDockに表示させるようにしておくのがいいかなと思います。


1.2 Windowsでコマンドプロンプトの立ち上げ方

なんでもいいのでフォルダを開いてください。次に、フォルダのアドレスバーにcmdと入力してください。
ほどなくコマンドプロンプトが立ちあがります。

f:id:todays_mitsui:20150818002828g:plain


2. 基本のコマンドpwd(cd), ls(dir), cdを知る

ターミナル(コマンドプロンプト)を立ち上げることができました、この時点でターミナル(コマンドプロンプト)での操作に慣れていない人は途方に暮れていることかと思います。
なぜなら、ターミナル(コマンドプロンプト)には豊富なメニューやボタンなどのGUIは無く、そもそもコマンドを知らなければ何も始められないからです。
普段、GUIを相手にマウスでの操作に慣れている人にとって、これは不便にも感じられるかも知れません。

とはいえ、この得体の知れない「コマンド」を使いこなせれば作業が効率化できるからこそターミナル(コマンドプロンプト)が現代まで使い続けられているわけです。
まずはターミナル(コマンドプロンプト)の恩恵を信じて、とにかく慣れましょう。

最低限使い始めるのに必要なコマンドは

  • pwd(cd)
  • ls(dir)
  • cd

の3つです。

※括弧内はWindowsでのコマンド名です、OSによって名前が違うのでややこしいですね

順番に解説します。

「俺は手っ取り早くWeb制作がしたいだけなんじゃい！」という人にとっては眠たい話かと思いますが、ホントに最小限・最低限の話なので頑張ってみてください。


2.1 pwd(cd) - 現在のディレクトリのパスを確認する

さて、ターミナル(コマンドプロンプト)を開いた時点であなたはとあるディレクトリの中に居ます。
現在居るディレクトリをカレントディレクトリと呼んだりしますが、まずはそのカレントディレクトリを確認する方法から、

Macユーザーでターミナルを使っている場合は画面に

pwd

と入力してエンターキーを押してください。

$ pwd
~/home/foobar

のようにディレクトリのパスっぽいものが表示されるはずです。


Windowsユーザーでコマンドプロンプトを使っている場合は

cd

と入力してエンターを押してください。

> cd
C:\Users\foobar

こちらも現在のディレクトリのパスが表示されますよね。

※結果はそのPCの環境によって異なります、何かパスっぽい文字が表示されればそれでOKと思ってください。


このようにターミナル(コマンドプロンプト)の操作では、

コマンドを打って → エンターを押して → 結果が表示される

というのが一連の流れになります。


2.2 ls(dir) - ディレクトリの中を一覧で見る

現在のディレクトリの場所が分かったら、次にディレクトリの中のファイル一覧を表示させてみましょう。

そんなものファインダー(エクスプローラー)開けば普通に見られるじゃろがい！と思うかもしれませんが、「ターミナル(コマンドプロンプト)でも見られるんだよ」くらいの理解で、ひとまずやってみてください。

ターミナルの場合は

ls

というコマンドです。

コマンドプロンプトの場合は

dir

です。

MacとWindowsで結果の表示は微妙に違いますが、どちらの場合もディレクトリの中に入っているファイルの一覧が表示されるはずです。

他にもコマンドにオプションを付けて実行することで「隠しファイルも含めた一覧を表示」などの応用技もあります。


2.3 cd - ディレクトリ間を移動する

lsコマンドでディレクトリの中にさらにディレクトリがあることが分かったら、内側のディレクトリに入って行きたくなるかもしれません。
そのときに使うのがcdコマンドです。

例えば、今いるディレクトリの中に「inner_dir」という名前のディレクトリがあるとして、その中に入っていくには

cd inner_dir

と入力します。

そうするとカレントディレクトリが指定したディレクトリに移り変わるはずです。
コマンドの実行が成功したかどうかpwd(cd)コマンドを実行して確かめてみてください。


逆に今いるディレクトリを出て、一つ上の階層に移りたいときもあるはずです。
そのときには

cd ..

と入力します。

ドットを二つ連ねた..が「一つ上の階層」という意味です。

ls(dir)とcdを使えばディレクトリ間を自由に行ったり来たりできるはずです。

補足

コマンドプロンプトを使っている場合、現在のディレクトリを見るためのcdとディレクトリを移るためのcd inner_dirには同じcdコマンドを使っています。
cdの後に半角スペースを開けてディレクトリ名を続ければそのディレクトリへ移動し、ディレクトリ名を省略すると現在のディレクトリのパスを表示するという動作をするわけです。

ターミナルでディレクトリ名を省略してcdを実行するとコマンドプロンプトとは違う動作をします。cdを実行するとそのユーザーのホームディレクトリに移動します。


これら3つのコマンドでフォルダ間の移動が出来るようになったかと思います。
移動だけしてもファイルを操作する方法を知らなければ役には立ちませんが、今のところはここまでで我慢してください。

この後、Sassやgulp.jsの使い方を学ぶにあたって「まずは目的のファイルがあるディレクトリに移動してください」というところからはじまります。
ディレクトリ間の移動は基本の「き」なのです。

ここまで「ターミナル(コマンドプロンプト)」とMacとWindowsでの呼び方を並べて書いてきましたが、今後は「コマンドライン」という名称で説明していきます。
「コマンドラインで～して」と出てきたらターミナルやコマンドプロンプトを思い浮かべて読み進めてください。


3. Rubyのインストール

これから使っていきたいSassはRubyというプログラミング言語で構築されています。
なのでまずはRubyを実行できる環境を作らなければいけません。

今回もOS別にインストールの方法を解説します。


3.1 MacでRubyのインストール

Macユーザーのみなさま、おめでとうございます。
MacOSには標準でRubyがインストールされています。

インストールのために必要な作業は特にありません。

インストール済みであることの確認だけしておきましょう。
コマンドラインで

ruby --version

と入力してください。

Rubyがインストール済みであれば、Rubyのバージョン番号が表示されるはずです。


3.2 WindowsでRubyのインストール

RubyInstallerというWindows向けのインストーラーが配布されています。
インストーラーをダウンロードしてダブルクリックで実行するだけでインストールが進むのでなんやかんやで一番おすすめです。

インストーラーも日本語化されているため簡単だと思います。

インストールの途中に、インストール先とオプションの指定という設定項目があるので、

  • Rubyの実行ファイルへ環境変数PATHを設定する
  • .rbと.rbwファイルをRubyに関連づける

の両方にチェックを入れておきましょう。


補足

特に環境変数PATHの設定はコマンドプロンプトにRubyの場所を教えるための重要な工程です。
環境変数PATHの設定がされていない場合は、Rubyがインストール済みであってもインストールされた場所を知る事が出来ず、

'ruby' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。

というようなエラーメッセージが返ってくるだけでRubyの実行ができません。

インストールはしたはずなのに実行が出来ない場合は、環境変数PATHの設定を見直しましょう。


正常にインストールできた場合は確認としてコマンドラインで

ruby --version

を実行してみましょう。

無事インストールが完了していれば、Rubyのバージョン番号が表示されるはずです。


4. Sassのインストール

Rubyの準備が整ったらいよいよお目当てのSassをインストールします。
Sassのインストールはコマンドラインから、gemというコマンドを実行して行います。

gemはRuby用のパッケージを管理するためのコマンドです。
コマンドラインから次のコマンドを実行してください。

gem update --system
gem install sass

コマンドが2行あるので、
1行入力して → エンターで実行して → 完了を待って → 次の行を入力して → ...
という感じでやってもらうといいですね。

完了までに少し時間がかかるかもしれないので、他の作業でもしながら待ってください。
長くても3分ほどで完了します。


インストールが完了したら、例によってバージョンを表示させて確かめてみましょう。

sass --version

これで正常にバージョン番号が表示されればSassのインストールは完了です。


5. Node.jsのインストール

さらにさらに、Sassだけではできない更に便利なことをやるためにNode.jsを実行する環境も用意してしまいましょう。

Node.jsは、みなさまお馴染みのJavaScriptをコマンドライン上で使うための実行環境です。
普段からWeb制作でJavaScriptに親しんだ方たちが、Web制作を便利にするたくさんのプログラムを書いてNode.js用に公開してくれています。


Node.jsの公式サイトにMac用, Windows用それぞれのインストーラーが用意されています。

それぞれのOS用のインストーラーをダウンロードして実行してください。

インストール完了の確認もいつもどおり

node --version

で行います。

補足

Node.jsのインストール方法についてWebで検索すると様々な方法でインストールする解説が見つかります。
私が知っている限りで

  • インストーラー
  • ソースからビルド
  • バイナリからインストール
  • homebrew
  • nodebrew
  • nvm
  • nodist
  • apt-get
  • yum

といった方法でインストールが可能です。

インストールの方法が多岐にわたる理由はOSの違いに加えて

  • 出来るだけ新しいバージョンのNode.jsを使いたい
  • 複数のバージョンのNode.jsを切り替えて使いたい

という要望に応えた結果だと言えます。

プログラム畑に慣れない普通のWebデザイナーからすれば、インストール方法がいくつもあり、それぞれにやっていることが全然違うとなると混乱するかもしれません。
「とりあえず使えればOK」という事であればインストーラーを利用するのが一番確実です。


6. gulp.jsのインストール

Node.jsまでインストールできれば準備はもう大詰めです。
今回の本題(2つめ)のgulp.jsをインストールしましょう。

gulp.jsのインストールはコマンドラインから、npmというコマンドで行います。
npmはNode.js用のパッケージを管理するためのコマンドです。

rubyとgemの関係に似ていますね。

コマンドラインから次のコマンドを実行してください。

npm install -g gulp


完了したら確認のため

gulp --version

を試してください。

7. GitHubからtasksリポジトリをダウンロード(clone)

今回のゴールはgulp.jsのタスクを実行してWeb制作を効率化することです。

普通にgulp.jsを使うと思うと自分でタスクを記述して実行する流れになります。
その部分を解説しだすとJavaScriptの説明からgulp.jsの説明からと長い話になるので今回は端折ります。

今回は出来合いのタスクを落としてきて使う事をゴールとしましょう。
普通のWebデザイナーにとっては、タスクを記述する事よりもいい感じに作られたタスクを使うことこそが本質です。


というわけで三井が組んだいい感じのタスクがGitHubにあります。

すでにGitに親しんでいる人はお好きな場所にcloneしてください。
よく分からない人はリンク先のサイドにある「Download ZIP」のボタンからファイル一式をダウンロードしてZIPファイルを解答しておいてください。

そこまで完了すればようやくタスクを実行する準備が整いました。
次回の記事ではgulpタスクの具体的な実行方法について解説します。


私からは以上です


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

tasksリポジトリはこちら、
todays-mitsui/tasks · GitHub