STEP3. gulpの導入

1.gulpとは?

Node.jsのStreamAPIを利用したビルドシステム、総称タスクランナー 公式サイト → http://gulpjs.com/

※Node.jsとは?
サーバー側で動作するJavaScript 公式サイト → https://nodejs.org/

gulpでできること

プラグインを利用することで様々な処理を自動化
プラグイン一覧 → http://gulpjs.com/plugins/

2.インストール

2-1. nodist(Windows専用のバージョン管理ツール)のインストール

Node.js はバージョンによって動作しないモジュールがあるので、Node.js のインストールとバージョン変更を簡単に行うことができるツールを使用します。

手順1:nodist ファイルのダウンロード
https://github.com/marcelklehr/nodist からZIPファイルをダウンロード
解凍したファイル一式を移動(例)C:\Program Files\nodist

手順2:PATHを通す
[コントロールパネル]⇒[システムとセキュリティ]⇒[システム]⇒[システムの詳細設定]⇒「システムのプロパティ」⇒[環境変数]
◎「システム環境変数」の「path」を選択して[編集]
nodist.cmd があるパスを追記(例)C:\Program Files\nodist\bin;
◎「システム環境変数」の[新規]
変数名:NODIST_PREFIX
変数値:package.json があるパスを記入(例)C:\Program Files\nodist

手順3:コマンドプロンプトを開いて、インストールできたか確認(バージョン確認)

nodist -v

2-2. Node.jsのインストール(nodistの初期セットアップ)

手順1:コマンドプロンプトからnodistをアップデートすると、Node.jsの安定版の最新バージョンとNPMがインストールされる
※NPM とは Node Package Manager の略で Node.js で作られたパッケージモジュール(タスクランナーなど)を管理するためのツール

nodist selfupdate

手順2:インストールできたか確認

node -v
npm -v

2-3. gulpのインストール

コマンドプロンプトからグローバルインストール

npm install --global gulp

3.プロジェクトごとの設定

手順1:プロジェクトのルートフォルダでコマンドプロンプトを開き、gulpをローカルインストール
/node_modules/gulp/フォルダ内にファイルが作成される

npm install --save-dev gulp

手順2:同じディレクトリに package.json を作成
package.jsonは、依存ライブラリやプロジェクトの基本情報(プロジェクト名・概要・作者・ライセンス・スクリプトなど)を記述する環境設定ファイル
コマンド内の項目は、後で編集可能なのでとりあえず全てEnterを押しても可

npm init

手順3:同じディレクトリに gulpfile.js を作成
ファイルの中身は、まずは以下の通りで、後から使用したいプラグイン(タスク)を追加していく

var gulp = require('gulp');

gulp.task('default', function() {
  // place code for your default task here
});

手順4:タスクを追加

gulp-compass:sass/compass を扱うパッケージをインストール

npm install --save-dev gulp-compass

Compassの設定ファイルconfig.rbを使用する場合
gulpfile.jsには以下を追記、cssとsassファイルがあるディレクトリに書き換える
※config.rb内のcss_dir や sass_dir も、gulpfile.jsと同じ設定にしておくことを忘れずに

var compass = require('gulp-compass');
 
gulp.task('compass', function() {
  gulp.src('./src/*.scss')
    .pipe(compass({
      config_file: './config.rb',
      css: 'stylesheets',
      sass: 'sass'
    }))
    .pipe(gulp.dest('app/assets/temp'));
});

gulpを実行して、sass/compassをコンパイルする

gulp compass

手順5:その他のプラグイン

gulpを実行する

gulp