Milk+ea

Weblog Is My Hobby.

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分ぐらいかかるかも。

インストールしたモノの説明

簡単にね。

準備は整ったから次は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ファイルを圧縮したモノが入ってるよ。

説明は全部終わり。読んでくれた人いたら、お疲れ!

Githubリポジトリも作ったので分からないときはCloneしてnpm iしてみるといいかも。