GulpとComposerを併用する

#はじめに
このページでは、筆者がこれまでのWebサイト構築の経験から、これからエンジニアでWebサイトを作りたいと考えている人に向けてGulpとComposerをお勧めしています。なお、使用可能な言語として最低限、HTML・JS・CSS・PHPが必要と考えています。
筆者の環境は、Windows 10です。
これを読んで、少しでも助けになれば幸いです。

##Gulpとは
[公式HP](https://gulpjs.com/)
Gulpは、プラグインを用いて様々な作業の短縮化を行うための土台となるシステムです。
コンパイルや圧縮などといったプラグインが既に用意されていて、設定を行うことで誰でも簡単に使うことが出来ます（操るとなると少し難しいです）。
Gulpのインストールには、[Node.js](https://nodejs.org/ja/)が必要です。

- 筆者の考えるGulpの良さ
    - 作業ファイルと公開するファイルとで分離することが出来る
    - コンパイルする環境を共有が容易

##Composerとは
[公式HP](https://getcomposer.org/)
Composerは、いくつかのパッケージやライブラリを作成しているプロジェクト内で活用するためのシステムです。
例えばパッケージには、phpを効率的に扱うためのCakePHPやsymfonyなどがあります。
それぞれに使用要件があるので注意が必要ですが、パッケージ同士の依存関係の管理を行ってくれるのでとても便利です。

- 筆者の考えるComposerの良さ
    - パッケージが豊富で、導入が容易
    - 面倒な依存処理を代行してくれる
    - 設定ファイルのみを共有すれば良い

#Gulpのインストール
##Node.jsのインストール
特にバージョンの指定等の必要が無ければ、このページから推奨版を選択してダウンロードして下さい。
![screencapture-nodejs-org-ja-1509775805292.png](https://qiita-image-store.s3.amazonaws.com/0/183540/6bdcbd8d-e275-fec2-14a6-38d783df9890.png)
ダウンロード完了後、ファイルを実行し、指示通りに進めインストールを完了させて下さい。
基本はデフォルトのままで問題ありません。

インストール完了後は、コマンドラインにて
`node --version`
でインストールしたバージョンが出力されているか確認して下さい。
出力されれば、インストール成功です。

##Gulpのインストール
[公式](https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md)
コマンドラインにて、プロジェクトで使用するフォルダにいる状態で、`npm init`を実行して下さい。
`package.json`というnpmで管理するための設定ファイルが作成されます。
もしも、設定ファイルを事前に入手出来るのであれば、代わりに`npm init --yes`を実行して下さい。

公式では、`gulp`コマンドを使えるようにするために、
`npm install gulp-cli -g`
を実行することを推奨しています。
これは、`gulp-cli`をグローバルにインストールするためのコマンドです（共有する環境には含まれません）。
チームでの共有部分のみに集約したい場合は、
`package.json`内の`scripts`に`"hoge": "gulp"`を追加して下さい（内容は適宜変更して下さい）。

Gulpをインストールするために、
`npm install gulp --save-dev`
を実行して下さい。
環境設定を事前にもらっていた場合は、`--save-dev`は要りません。

##Gulpの利用
まず初めに、Gulpの設定ファイルである`gulpfile.js`を作成して下さい。

```js:gulpfile.js
var gulp = require('gulp');

gulp.task('default', function() {
  // デフォルトの動作
  gulp.src(['./dev/**/*'])
    .pipe(gulp.dest('./public'));
});
```

`gulp-cli`をインストールした場合は`gulp`で、
`package.json`内に記述した場合は`npm run hoge`でGulpを起動して下さい。
デフォルトの動作をすると思います。
上記のファイルでは、「作業フォルダ内（`dev`）の全てのファイル（サブフォルダ内も含む）を公開フォルダ（`public`）にフォルダ構造を保持してコピーする」という記述になっています。

###Gulpで共有するもの
- 作業フォルダ（例：`dev`）
- package.json
- gulpfile.js

これだけになるようにフォルダ構成を組んだ方が良いです。

#Composerのインストール
##Composerのインストール
[公式](https://getcomposer.org/doc/00-intro.md)
公式は英語のみのサイトです。
PHPは5.3.2以上が必須みたいなので、注意して下さい。

Linux、OSX、Windows全てに公式のインストーラーが用意されています。
これをダウンロードして、実行して下さい。
これで、最新版のインストール、パスを通すことをやってくれます。
Windowsに関しては、コマンドラインにて`composer`を叩くだけで呼べるようになります。

##Composerの利用
Composerの設定ファイルは、`composer.json`です。こちらも`JSON`形式なんですね。

```json:composer.json
{
    "require": {
        "monolog/monolog": "1.0.*"
    },
    "config": {
        "vendor-dir": "public/vendor"
    }
}
```

`require`内には、インストールするパッケージを記入します。記入内容は、パッケージ名(`monolog/monolog`)とそのバージョン(`1.0.*`)です。
公式ではこれだけですが、もっと多くの設定を行うことが出来ます。
例えば`config`内の`vendor-dir`では、`composer`のパッケージをインストールするフォルダを指定出来ます。
他の設定は、[ここ](https://getcomposer.org/doc/04-schema.md)から調べてみて下さい。

###Composerで共有するもの
- composer.json

#おわりに
このような便利なツールのおかげでチームでの開発がしやすくなっています。
しかし、効率良く行うためには、いかに共有するファイルの数を減らせるか、共有するフォルダ構造を単純化出来るかが重要です。それは変更点を分かりやすくし、チーム内で共通認識を持つためです。
これらを導入して終わりではなく、そこからがスタートです。
筆者は以前下手に導入して、余計ややこしく、開発を困難にしました。
かといって挑戦しなければいつまで経っても作業の効率化は進まないので、チームで協力しながら挑戦してみて下さい。

#参考文献
- [Gulp 公式](https://gulpjs.com/)
- [npm 公式](https://www.npmjs.com/)
- [Composer 公式](https://getcomposer.org/)
- [npm から gulp インストールまでの手順](https://qiita.com/miiitaka/items/32836ec7a00e88600de2)
- [gulpfile.jsの書き方確認。](https://qiita.com/hitomi5/items/47d98a35314f129abbf6)
- [ComposerでPHPの依存関係を管理する](https://qiita.com/tadsan/items/86099d44d12f1103b0a0)