CSS Nite LP39「Coder's High 2015：コーディングスタイルの理想と現実」の、
第4セッション「ビルドツールはじめの一歩」で紹介したgulpを使ったタスク自動化のサンプルです。
Node.jsのインストールがお済みでない方は、予めインストールを済ませておいてください。
Node.js 公式サイト (インストーラーはこちらから)
- Step 1. このページの右下の
Download ZIPボタンからZIPファイルをダウンロード後、解凍 - Step 2.
ターミナルもしくはコマンドプロンプトをひらき、解凍したフォルダをドラッグ・アンド・ドロップしてEnter - Step 3. (今作業してるPCで)初めて
gulpを使う方は、以下のコマンドを実行 - 既に使ったことがある方は
Step 4へ
npm install -g gulp
# ※ Macをお使いで、もし↑でエラーが出る場合
sudo npm install -g gulp
- Step 4.
gulpがインストールできたら、以下のコマンドを実行
npm install
- Step 5. インストールが終わったかな？と思ったら、以下のコマンドを実行
- インストールが終わると、カーソルの前に
$や>が表示されていると思います
gulp
| プラグイン | 内容 |
|---|---|
| gulp-concat | ファイルの結合を行う |
| gulp-uglify | ファイルの圧縮を行う |
| gulp-sass | Sass(node-sass)を実行してSCSSのコンパイルを行う |
| gulp-watch | ファイルの変更監視を行う |
| browser-sync | ブラウザのリロード・同期を行う |