はじめに
このページでは、筆者がこれまでのWebサイト構築の経験から、これからエンジニアでWebサイトを作りたいと考えている人に向けてGulpとComposerをお勧めしています。なお、使用可能な言語として最低限、HTML・JS・CSS・PHPが必要と考えています。
筆者の環境は、Windows 10です。
これを読んで、少しでも助けになれば幸いです。
Gulpとは
公式HP
Gulpは、プラグインを用いて様々な作業の短縮化を行うための土台となるシステムです。
コンパイルや圧縮などといったプラグインが既に用意されていて、設定を行うことで誰でも簡単に使うことが出来ます（操るとなると少し難しいです）。
Gulpのインストールには、Node.jsが必要です。
- 筆者の考えるGulpの良さ
- 作業ファイルと公開するファイルとで分離することが出来る
- コンパイルする環境を共有が容易
Composerとは
公式HP
Composerは、いくつかのパッケージやライブラリを作成しているプロジェクト内で活用するためのシステムです。
例えばパッケージには、phpを効率的に扱うためのCakePHPやsymfonyなどがあります。
それぞれに使用要件があるので注意が必要ですが、パッケージ同士の依存関係の管理を行ってくれるのでとても便利です。
- 筆者の考えるComposerの良さ
- パッケージが豊富で、導入が容易
- 面倒な依存処理を代行してくれる
- 設定ファイルのみを共有すれば良い
Gulpのインストール
Node.jsのインストール
特にバージョンの指定等の必要が無ければ、このページから推奨版を選択してダウンロードして下さい。
ダウンロード完了後、ファイルを実行し、指示通りに進めインストールを完了させて下さい。
基本はデフォルトのままで問題ありません。
インストール完了後は、コマンドラインにて
node --version
でインストールしたバージョンが出力されているか確認して下さい。
出力されれば、インストール成功です。
Gulpのインストール
公式
コマンドラインにて、プロジェクトで使用するフォルダにいる状態で、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を作成して下さい。
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のインストール
公式
公式は英語のみのサイトです。
PHPは5.3.2以上が必須みたいなので、注意して下さい。
Linux、OSX、Windows全てに公式のインストーラーが用意されています。
これをダウンロードして、実行して下さい。
これで、最新版のインストール、パスを通すことをやってくれます。
Windowsに関しては、コマンドラインにてcomposerを叩くだけで呼べるようになります。
Composerの利用
Composerの設定ファイルは、composer.jsonです。こちらもJSON形式なんですね。
{
"require": {
"monolog/monolog": "1.0.*"
},
"config": {
"vendor-dir": "public/vendor"
}
}
require内には、インストールするパッケージを記入します。記入内容は、パッケージ名(monolog/monolog)とそのバージョン(1.0.*)です。
公式ではこれだけですが、もっと多くの設定を行うことが出来ます。
例えばconfig内のvendor-dirでは、composerのパッケージをインストールするフォルダを指定出来ます。
他の設定は、ここから調べてみて下さい。
Composerで共有するもの
- composer.json
おわりに
このような便利なツールのおかげでチームでの開発がしやすくなっています。
しかし、効率良く行うためには、いかに共有するファイルの数を減らせるか、共有するフォルダ構造を単純化出来るかが重要です。それは変更点を分かりやすくし、チーム内で共通認識を持つためです。
これらを導入して終わりではなく、そこからがスタートです。
筆者は以前下手に導入して、余計ややこしく、開発を困難にしました。
かといって挑戦しなければいつまで経っても作業の効率化は進まないので、チームで協力しながら挑戦してみて下さい。