Gulpを使ってSASSっさとコーディング。 前編

229 view

どーもー。

この度、レクリエーション部の部長に指名されましたTatsuyaでございます。

部員は私を含め1人だそうです。

いったい一人で何をする部なんでしょうか。

まずは勧誘からですね。

それまで一人で寿司打でもやってます。

 

前回、いきなり登場し、クラフトビールイベントのレビューを綴ったわけですが、
そろそろ自己紹介でも・・・と思ったところで、

「Gulpでブログ書いて」

とのお達しが。

というわけで、プロフィールはまた今度というわけで、
今回のテーマは、Gulpです!

Gulpとは?

一言で言って、タスクランナーです。

さて、タスクランナーとは?

例を挙げましょう。ただいま当社では、CSSからSCSSに絶賛移行中であります。

確かにSASSは便利です。ただひとつ面倒なのがコンパイル。
しかもコンパイルしたうえでサーバにアップしなければいけない。
だったら、
「SASSの編集→SASSのコンパイル→SASSのアップロード」
という一連の流れを「タスク」としてGulpに処理をさせてしまいましょう。

これが、Gulpのお仕事です。

そんな頼れるGulpの導入から、SASSでのコーディングを楽にする方法までを見ていきましょう。

まずはNodeをインストール。

こちらからダウンロードしてください。

https://nodejs.org/en/

インストールしたら、コマンドプロンプトを開き、以下を実行。

■ node -v

Nodeのバーションが表示されるのを確認しましょう。
確認できたら、インストールは成功です。

package.jsonをつくる。

次に、gulpを使える環境のベースを作っていきます。

ここで、環境を構築するディレクトリを用意しましょう。
例えばデスクトップに”test”ディレクトリを作った場合、コマンドプロンプトで以下を実行。

■ cd desktop/test

対象のディレクトリに移動します。

ディレクトリが移ったら、次に以下のコマンドを実行します。

■ npm init

gulp04

環境の設定が出来ます。こちらはあとで設定出来ますので、とりあえずスキップでもOK。

package.jsonが作成されたのを確認してください。

Gulpをインストール!

いよいよGulpをインストールします。
コマンドプロンプトで以下を実行してください。

■ npm install gulp -g

そしてローカルにもインストールします。

■ npm install gulp –save-dev

ここでpackage.jsonの中身を見てみましょう。

gulp03

“devDependencies”: {
“gulp”: “^3.9.1”,

この部分から、gulpがインストールされたことが確認できました。

Gulpの設定。

gulpfile.jsという名前のJSファイルをpackage.jsonと同じディレクトリに作成します。

そして以下のように記述します。

gulp02

これでGulpの環境は整いました。

SASSのコンパイルをさせましょう。

Gulpのプラグインをインストールします。
以下のコマンドを実行してください。

■ npm install gulp-sass –save-dev

続いて「タスク」を作成します。

gulpfile.jsを開いて、

gulp01

このように記述。

“gulp”を実行すると”sass”というタスクが機能し、
“sass/”ディレクトリ以下の.scssファイルがコンパイルされ、
“css”ディレクトリ内に書き出される

といった内容であります。

それではいよいよ、コンパイルしてみましょう。

コマンドプロンプトで、

■gulp sass

これだけ!
そうするとcssフォルダに、コンパイルされたcssファイルが書き出されているのではないでしょうか。

gulp07

長くなったので、今回はここまで。

更に、Gulpを使えば、保存しただけでコンパイルもしてくれます。

その方法は次回。

 

なお、画像をご覧いただければ分かるかと思いますが、

私はSublime派です。

では!

WRITER

Tatsuya KAWAHARA

制作部 / Web Coder , Web Director Tatsuya KAWAHARA

1988年8月生まれ。 社内唯一のAB型。

大学卒業後、飲食店店長、自動車販売営業を経て、未経験で入社する。

制作部配属後、新オフィスの制作、オフィスチェアの制作、デスクの制作を任される。

最近、Web制作とWebディレクターを始める。

TAGS