Macだとさくっと出来るのに、Windows8（x64）だとものすごい苦労した・・・。

これから導入する方のことも意識しつつ、備忘録も兼ねて、メモしていこうと思う。
長くなるので、何回かに分ける。今回は、初期設定編。

gulpとは

Node.jsを使用したタスク自動化ツール（タスクランナー）。
Sassをコンパイルしたり、コード整理を自動化したり、
プレフィックスを自動でつけたりなど
面倒なことを手動でしなくてよいので、かなり便利。

他にもGruntがあるが、
gulpの方が後発の為、Gruntを意識して開発されており、
Gruntより処理が早いなど利点も多い。
よって現在注目されている。

初期設定

①Node.jsをインストールする

赤枠の箇所をボタンを押下し、ダウンロード。
ダウンロード後、インストーラーを起動し、インストール。

コマンドプロントを開き（いわゆる黒い画面）
以下のコードを打つ。

node -v

バージョン情報が出ればOK。

②ディレクトリを作る

gulp環境を構築するディレクトリを用意する。
普段使用しているプロジェクトを保存しているフォルダにしておくとよいが、
一旦テストで行う場合は、任意のフォルダを作成する。
※注意点として、フォルダ名に日本語を含めると動かないのですべて英語のフォルダにする。

C:\test\hogehoge\

③package.jsonを用意する

コマンドプロントにて、任意のディレクトリに移動。
※cd ディレクトリ名と入力すると、任意の場所に移動できる

cd C:\test\hogehoge\

移動したら、

npm init

と打ち込む。

打ち込むと、文字列が自動出力され、以下の画面の位置で止まってしまうが、
Enterを打ち込む。同じように文字列が自動出力されるが、
気にせずEnterを打ち込む。

Is this OK?　と表示され、Enterを打ち込み
以下の画面のようにディレクトリが表示されたら完了。

先程任意に作っておいたフォルダを見ると、「package.json」というファイルが出来ているはず。

④Gulp.jsをインストールする

以下２つのコマンドを入力する。
文字列が自動出力されるので、終わるまで待つ。

npm install gulp -g

npm install gulp --save-dev

完了後、フォルダを見ると、
「node_modules」というフォルダが出来ていると思う。

「package.json」をテキストエディタで開き、
以下の記述が追加されていればOK。

"devDependencies": {
    "gulp": "^3.9.1"
}

⑤gulpfile.jsを用意する

コマンドプロントではなく、単純にフォルダに
「gulpfile.js」を作る。

作ったら、「gulpfile.js」をテキストエディタで開き、
以下のコードを記述する。
※「gulpfile.js」をコピペで作ったりするとコピペ前の記述が残っている場合があるので、
きちんと全消ししてから以下のコードを追加する

var gulp = require("gulp");

以上で、gulpの初期設定は完了。

⑥htmlやCSSのディレクトリについて

これまで作ってきた

node_modules
gulpfile.js
package.json

これらはgulpを動かす為に必要なファイルだ。
具体的にhtmlとCSSはどこに置くかというと、
私の場合はgit的な考え方を踏襲しつつ、

project
  ├── node_modules
  ├── package.json
  ├── gulpfile.js
  ├── master
  └── develop

「develop」フォルダと「master」フォルダを作り、
「develop」フォルダにSass、html、CSS、画像、jsファイルを置いて、
これに対してgulpが動くように設定した。

「master」フォルダは納品用のファイルを入れる。
つまりSassファイルを除外したhtml、CSS、画像、jsを入れて
サーバーにアップロードするだけのファイルとしてここに保管しておくことにした。

⑦インストールしたプラグイン

私の場合、以下のプラグインを一旦導入した。
それぞれの使用方法や注意点についてはまた次回まとめようと思う。

gulp-sass・・・Sass(SCSS)ビルドタスク
gulp-compass・・・Compassビルドタスク。Compassを使用する場合はこっちを起動
gulp-connect-php・・・PHP環境を使用するタスク
gulp-autoprefixer・・・ベンダープレフィックス自動付加
gulp-frontnote・・・スタイルガイド生成
gulp-notify・・・コンパイル後のメッセージ通知
gulp-htmlhint・・・HTMLバリデーションチェック
gulp-csslint・・・CSSバリデーションチェック
gulp-sass-lint・・・Sassバリデーションチェック
gulp-scss-lint・・・Scssバリデーションチェック
gulp-eslint・・・jsバリデーションチェック
gulp-prettify・・・HTMLコード整形
gulp-csscomb・・・CSSコード整形
gulp-beautify・・・jsコード整形
run-sequence・・・タスクの複数処理
gulp-imagemin・・・画像圧縮
imagemin-pngquant・・・画像圧縮png
imagemin-mozjpeg・・・画像圧縮jpg
imagemin-gifsicle・・・画像圧縮gif
imagemin-svgo・・・画像圧縮svg

初期設定までは、簡単に出来るのだが・・・

初期設定はこの投稿のように割と難しくなくできたので
その感覚でプラグインをインストールしてみたが、
うまくいくプラグインとうまくいかないプラグインがあった。

うまくいかないプラグインについては、以下にまとめたので
参考にしていただけると幸いである。

Windows8（x64）のgulpでうまくいかなかったプラグインの対処法

プライグイン設定が出来た場合、以下の記事を参照することで
Gulpを使うことが出来る。

Windows8（x64）で構築したgulpの使い方

Windows8（x64）でgulpを初期設定する