Gulpを使ってBrowser Sync + Sass, Less or Stylus + Coffee Scriptなタスクを作る
最近、Stylusがいい感じだなって思ってる。
準備
まず、必要なツールをインストールしたいから、下のコマンドを実行!あ、RubyとNodeJSはインストールしておくように。
gem install sass npm i -g less stylus coffee-script
次に、作業用ディレクトリを適当な場所に作って移動しておいて。移動したら、package.jsonを作るよ。次のコマンドを実行。
npm init
何かいろいろ聞かれるけど、全部Enter
で大丈夫。
最終的にディレクトリ構造は次のようになる予定。この構造を今真似してみてほしい。style
へは、Sass,Less,Stylueファイル。script
へは、CoffeeScriptファイルを置くよ。
. ├── app │ ├── index.html │ ├── script │ │ ├── script.coffee │ │ └── script.js │ └── style │ ├── style.css │ └── style.scss ├── gulpfile.coffee # or gulpfile.js └── package.json
よし最後に、Gulp本体とその仲間達をインストールしよう。同じディレクトリで次のコマンドを実行!コピペしづらいのはごめん。
npm i -D gulp gulp-load-plugins gulp-ruby-sass gulp-less gulp-stylus gulp-coffee gulp-coffeelint gulp-sourcemaps gulp-if gulp-cached gulp-plumber gulp-size gulp-minify-html gulp-pleeease gulp-uglify browser-sync del run-sequence
たくさんインストールするから4、5分ぐらいかかるかも。
インストールしたモノの説明
簡単にね。
- gulp
Gulp本体 - gulp-load-plugins
Gulpプラグインをrequire
で読み込まなくても使えるようにするモノ
例えば、gulp-ruby-sass
なら$.rubySass
という感じ - gulp-ruby-sass
Sassのコンパイル - gulp-less
Lessのコンパイル - gulp-stylus
Stylusのコンパイル - gulp-coffee
CoffeeScriptのコンパイル - gulp-coffeelint
CoffeeScriptのコードチェック - gulp-sourcemaps
コンパイル時にSourcemapの書き出し - gulp-if
一連の流れの中で条件をつけて実行させたい時に使用 - gulp-cached
ファイルを監視して、変更があったファイルだけを処理する - gulp-plumber
途中でコンパイルエラーなどが起きても処理を終わらせない - gulp-size
処理中のファイルのサイズをコマンドラインに表示 - gulp-minify-html
HTMLの圧縮 - gulp-pleeease
CSSの圧縮とAutoprefixer - gulp-uglify
Javascriptの圧縮 - browser-sync
サーバーを建てたり、変更ファイルをLiveReloadのように読み込んだり、ブラウザ間同期 - del
ディレクトリやファイルの削除 - run-sequence
同期処理
準備は整ったから次はgulpfileを作る、というか紹介するよ。
Gulpfileとその他ファイル
次のgulpfileはCoffeeScriptで作ったものだけど、Javascriptが見たいって人はコンパイルしたモノもあるよ。
これをgulpfile.coffeeとして保存しよう。
.
面倒かもしれないけど、app/index.htmlも作っておこう。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Hello!!!!!</title> <link rel="stylesheet" href="style/style.css"> </head> <body> <h1 class="hello">Hello!!!!!</h1> <script src="script/script.js"></script> </body> </html>
タスク実行
じゃあ、コマンドラインで次のコマンドを実行してほしい。
gulp
いろいろ表示されたけど、それは今default
タスクが実行されたってこと。http://localhost:8000/にアクセスして、Helloと表示されたらうまくいってるよ。
app/style/style.scssを次のように書いて保存して、ブラウザを見てみて。
.hello { color: red; }
Helloという文字が赤くなってると思う。style.scssを保存したその瞬間、Sassファイルのコンパイルとブラウザの更新をしてくれたんだ!!うひょ。
index.htmlやapp/script/script.coffeeも更新すると、同じようにコンパイルや更新をやってくれる。超楽だ。
最後に、dist
タスクを実行すると公開用のファイルが入ったdistディレクトリが作られる。
gulp dist
distディレクトリには、app以下のすべての.html
,.css
,.js
ファイルを圧縮したモノが入ってるよ。
説明は全部終わり。読んでくれた人いたら、お疲れ!