gulpでペライチのサイトを瞬時に作る!

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

gulp.js
フロントエンドの世界に半年位前に飛び込みましたが、どんどん新しい技術が出てくるので着いていけません。
今回は、Jade,SCSSから始まり、そのコンパイルを動的に行なってくれるタスクランナーgulpの紹介までいきたいと思います。

CSSをそのまま書くのはもう古い?

SASS, SCSS, LESS

SASS, SCSS, LESSなどはCSSのプリプロセッサです。つまり、コンパイルすることでCSSになります。
わざわざCSSを書くだけのことになんでコンパイルしないといけないかというと、その方が便利だからです。
これらの言語がなぜ便利なのかの説明は色々な所で紹介されているので省略しますが、キーワードとしては
・ネスト
・mixin
・include
ってとこらへんでしょうか。

じゃあ他の言語は?

フロントエンドで使う言語と言えば、HTML,CSS,Javascriptですね。現在それぞれにプリプロセッサが有ります。有名なのは
HTML → Jade
CSS → SCSS
Javascript → CoffeeScript
(独断と偏見で選んでますが他のプリプロセッサも勿論あります。)
それぞれの言語に癖があって慣れるまでは少し大変ですが、慣れてしまえばコーディングのスピードが劇的に上がります。
でもコーディングが速くなってもわざわざコンパイルするとか面倒じゃない???と思うはずです。思ってください。
その面倒くさい処理を全て自動化してくれるのがタスクランナーです!

タスクランナーgulp

gulpはNodeで書かれており、フロントエンドに限らず色々なことに使えるのですが、今回はJade, SCSSのコンパイルとライブリロードを搭載したものを作成したので共有しようと思います。

PR

必要なもの

  • nodejs
  • npm

を事前にインストールしておきましょう。
私の環境では

となっていて正常動作しています。
gulp-starterの右下にあるDownload ZIPからダウンロードします。もちろんcloneしてもいいです。(Downloadディレクトリに保存したとします。)
ここからはターミナルで

各言語の使い方

最初は以下のようなディレクトリ構成になっています。(node_moduleは省略しています。)
gulp-allfile
基本的にいじるのはsrcディレクトリ以下だけです。

Jade

Jadeファイルはsrc/jadeにあります。
index.jadeが基本でindex.htmlになるものです。
src/jade/inc/coreのbase.jadeにメタタグなどのhead部分が書かれています。
src/jade/inc/layoutには全ページ共通のheaderやfooterにしたいものを書きます。

SCSS

src/scss/app.scssがapp.cssとなります。
app.scssでincludeされたファイルがcssにコンパイルされます。

Javascript

src/js/app.jsに書き込まれたコードがall.min.jsに圧縮されます。
モジュールなどを使う場合はvendorフォルダに入れましょう。

画像

画像ファイルはsrc/imgフォルダに入れましょう。

起動方法

とすることでgulpが起動しブラウザが起動します。
jadeやscssなどを書き換えることで自動的にブラウザが更新され、最新状態が表示されます。
良いgulpライフを!

PR

この記事が気に入ったら
いいね ! しよう

Twitter で
  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

SNSでもご購読できます。