gulpとは

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

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

初期設定

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

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

node -v

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

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

C:\test\hogehoge\

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

cd C:\test\hogehoge\

移動したら、

npm init

と打ち込む。

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

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

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

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

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」をコピペで作ったりするとコピペ前の記述が残っている場合があるので、
きちんと全消ししてから以下のコードを追加する

var gulp = require("gulp");

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

これまで作ってきた

これらは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を使うことが出来る。