Pocket

今までGruntを使っていましたが、gulpのほうが早くて、分かりやすいなどと、良いこと尽くしみたいなので導入してみました。


今回作成したタスクでできることは、

  1. ・scssのコンパイル

になります。
cssやjsの圧縮などは長くなるので、次回以降に書いていきます。

※Mac環境を前提とします。またnode.js、rubyはインストールしてあるものとして進めます。



gulpのインストール

まずは、gulpをグローバルにインストールします。

sudo npm install -g gulp

をたたきます。


gulpがインストールできたら、gulpを使用するプロジェクトに移動し、

npm install gulp –save-dev

をたたき、ローカルにgulpをインストールします。うまくインストールできない場合は、頭に「sudo」を付けて、

sudo npm install gulp –save-dev

と、してください。


続いて、gulpをローカルインストールしたディレクトリにgulpfile.jsを新規に作成します。

上記のように記述したらターミナルを起動し、プロジェクトのディレクトリまで移動します。
移動できたら、

gulp

と、たたいてみます。


[21:35:35] Using gulpfile ~/Sites/gulp_test/work/gulpfile.js
[21:35:35] Starting ‘default’…
[21:35:35] Finished ‘default’ after 54 μs

こんな感じで返ってくれば、gulpのインストールは完了です。



scssをコンパイルする

gulpがインストールできたので、scssをコンパイルし、cssを作成するタスクを作成します。

scssのコンパイルにはgulp-ruby-sassというプラグインを使用します。

npm install gulp-ruby-sass –save-dev

でインストールします。インストールできたら、先ほどのgulpfile.jsを下記のように追記します。


追記ができたら、ファイルを準備してタスクを実行してみます。

scssディレクトリを作成し、style.scssを作成し配置したら、適当に編集します。
編集ができたら、ターミナルより、

gulp sass

をたたきます。
うまく動作していれば、dst/cssにstyle.cssが作成されます。



まとめ

今回はgulpのインストールと、scssをコンパイルしてcssを作成するタスクを作成しました。
次回は、cssの圧縮とベンダープレフィックス付けを行うタスクを作成します。


以上になります。



Pocket

Comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

Copyright © team naporitan All Rights Reserved.