Gulp導入メモ

タスクランナーにgruntを使用していたのですが、この度gulpに挑戦してみました。

使用したプラグインは、記載の内容以外にオプションが沢山あります。
ここでは、最低限私が必要だった内容を、未来の私の為に記載してあります。

##gulpを使ってやりたかったこと
1.sassのコンパイル
2.cssの結合、圧縮
3.jsの結合、圧縮
4.ローカルサーバーの構築と、ライブリロード
5.bower.jsonから"main"のjsファイルを抽出
6.htmlテンプレート（angular用）を１つにまとまる
7.cssスプライトの画像、cssの作成

基本的なことばかりですが、結構時間がかかりました。。。

##導入方法
①gulpコマンドが使えるようにインストール

```
npm install -g gulp
```

②package.jsonを作成
node_modules用のpackage.jsonを作成します。

```
npm init
```

③gulpをローカルにもインストール

```
npm install gulp --save-dev
```
package.jsonにgulpが追加される。

```lang:package.json
  "devDependencies": {
    "gulp": "^3.9.0"
  },
```

④プラグインのインストール
使用するプラグインをインストールします。
インストールされたプラグインはpackage.jsonに記載されます。

```
npm install <プラグイン> --save-dev

```
##使い方

タスクを実行用のgulpfile.jsを作成する。

①gulpを読み込む

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

②使用いたいプラグインを読み込む

```lang:gulpfile.js
var hogehoge = require("hogehoge");
```

③タスクの登録を行う

```lang:gulpfile.js
gulp.task("hogehoge", function() {
});
```
④タスクを実行する対象ファイルを指定する

```lang:gulpfile.js
gulp.task("hogehoge", function() {
   gulp.src("hogehoge/**/*html")
});
```
⑤指定したファイルに対して実行したい処理指定する

```lang:gulpfile.js
gulp.task("hogehoge", function() {
   gulp.src("hogehoge/**/*html")
　　　　.pipe(hogehoge())
});
```
⑥出力先を指定する

```lang:gulpfile.js
gulp.task("hogehoge", function() {
   gulp.src("hogehoge/**/*html")
　　　　.pipe(hogehoge())
　　　　.pipe(gulp.dest('./dest'));
});
```
##ローカルサーバーを立てる（gulp-connect編）

①プラグインをインストール
```
npm install gulp-connect --save-dev 
```

②プラグインを読み込む

```lang:gulpfile.js
var concat = require("gulp-concat");
```

②ローカルサーバーのタスクを登録
root・・・rootディレクトリ
livereload・・・LiveReloadを有効化

```lang:gulpfile.js
gulp.task('connect', function() {
  connect.server({
    root: 'www',
    livereload: true
  });
});
```

##ローカルサーバーを立てる（browser-sync編）

①プラグインをインストール

```
npm install browser-sync --save-dev
```

②プラグインを読み込む

```lang:gulpfile.js
var browser = require("browser-sync");
```

②ローカルサーバーのタスクを登録
baseDir・・・rootディレクトリ

```lang:gulpfile.js
gulp.task("server", function() {
    browser({
        server: {
            baseDir: "./"
        }
    });
});
```

**gulp.watch**メソッドを使って、該当ファイルが更新されるのを監視して、
ブラウザをリロードする。

```lang:gulp.js
gulp.task("watch", function() {
  gulp.watch('sass/**/*.scss', ['sass']);
});

//browser.reload()メソッドでブラウザを更新
gulp.task("sass", function() {
  gulp.src(["sass/app.scss"])
    .pipe(sass())
    .pipe(gulp.dest("www/app/"))
    .pipe(browser.reload({
      stream: true
    }));
});

```

**{stream: true}**オプションをつけることで、画面をリロードせずに修正を反映することができます。

##jsの結合をする場合
①プラグインをインストール

```
npm install --save-dev gulp-concat
```

①結合用のタスクを登録
結合後のファイル名・・・concat.js

```lang:gulp.js
var gulp = require("gulp");
var concat = require("gulp-concat");

gulp.task("concat", function() {
  gulp.src("js/**/*.js")
    .pipe(concat('concat.js'))
    .pipe(gulp.dest("dest/"));
});
```

もしjsの結合順序を指定したい場合は下記のように配列で指定するのかな・・・

```lang:gulp.js
var gulp = require("gulp");
var concat = require("gulp-concat");

gulp.task("concat", function() {
  gulp.src(["lib/**/*.js","js/**/*.js"])
    .pipe(concat('concat.js'))
    .pipe(gulp.dest("dest/"));
});
```

###上記方法での、jsの結合、圧縮の問題点
当然なのだが、jsファイルを全て読み込んで、結合する場合、
bowerなどを使用してライブラリまるごとダウンロードしていると全てのjsファイル結合してしまう。

そこで、**main-bower-files**を使用してbowerのmainファイルだけ読み込んで結合する。

##main-bower-filesでbower.jsonからmainファイルを抽出
①プラグインをインストール

```
npm install main-bower-files
```
②抽出ファイル一覧を取得

```lang:gulp.js
var mainBowerFiles = require("main-bower-files");
var files = mainBowerFiles({
    debugging: true,
    checkExistence: true
  });
```
####オプション
debugging・・・デバックログを表示してくれます。
checkExistence・・・プラグインファイルを正しく取得できなかった場合（mainファイルの指定がない場合など？）エラーを表示してくれます。

####困ったことメモ
* mainファイルの指定がない場合、設定されているmainファイル以外のファイルを読み込みたい場合は、overridesで上書きをすることで抽出ができます。
* bower.jsonでインストール済みのライブラリが**devDependencies** (--save-dev)でインストールしている場合、
抽出対象にならないようでした。
なので**dependencies** (--save)でインストールすれば抽出対象になります。

##ファイルの圧縮

ファイルを結合したら、圧縮したいです。

①プラグインをインストール

```
npm install gulp-uglify --save-dev 
```

②ファイル圧縮のタスクを登録

uglify()を実行することで、対象ファイルを圧縮できます。

```lang:gulp.js
var uglify = require('gulp-uglify');

gulp.task('compress', function() {
  gulp.src('lib/*.js')
    .pipe(uglify())
    .pipe(gulp.dest('dist/'));
});
```

##テンプレートhtmlを１つにまとめる。
テンプレートファイルをまとめて、htmlのリクエストを減らしたい。
そこで、テンプレートhtmlを、angularのtemplateCacheに変換する。

①プラグインをインストール

```
npm install gulp-angular-templatecache --save-dev
```

②テンプレート作成用のタスクを登録

```lang:gulp.js
var templateCache = require('gulp-angular-templatecache');
 
gulp.task('default', function () {
  return gulp.src('templates/**/*.html')
    .pipe(templateCache())
    .pipe(gulp.dest('public'));
});

```

下記のような形式で出力される。

```lang:template.js
angular.module("templates").run([$templateCache,
  function($templateCache) {
    $templateCache.put("template1.html",
      // htmlの中身
    );
    $templateCache.put("template2.html",
      // template2.html content (escaped) 
    );
    // htmlの中身
  }
]);
```

##cssスプライトの作成

①プラグインをインストール

```
npm install gulp.spritesmith --save-dev
```

②タスクを登録する

下記のタスクを実行すると、スプライト画像用の変数のcss(sass)と、画像ファイルが作成されるので、それをcssで利用する。

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

gulp.task('sprite', function () {
  var spriteImages = gulp.src('public_html/img/sprite/*.png') //スプライトにする画像群
  .pipe(spritesmith({
    imgName: 'sprite.png', //スプライトの画像名
    cssName: '_sprite.scss', //生成されるscss名
    imgPath: '/img/sprite.png', //生成されるscssに記載されるパス
    cssFormat: 'scss' //cssのフォーマット
  }));

　spriteImages.img.pipe(gulp.dest('img/')); //スプライト画像の保存先
  spriteImages.css.pipe(gulp.dest('sass/')); //cssの保存先
 
```

##使用したプラグイン
* sassのコンパイル・・・<a href="https://www.npmjs.com/package/gulp-sass" target="_blank">gulp-sass</a>
* ファイルの結合・・・<a href="https://www.npmjs.com/package/gulp-concat" target="_blank">gulp-concat</a>
* ファイルの圧縮・・・<a href="https://www.npmjs.com/package/gulp-uglify" target="_blank">gulp-uglify</a>
* ローカルサーバー・・・<a href="https://www.npmjs.com/package/gulp-connect" target="_blank">gulp-connect</a>
* ローカルサーバー(こっちのほうがいいかも）・・・<a href="https://www.npmjs.com/package/browser-sync" target="_blank">browser-sync</a>
* bower.jsonのmainファイルを読み込む・・・<a href="https://github.com/ck86/main-bower-files" target="_blank">main-bower-files</a>
* template用のhtmlファイルを一つにまとめる・・・<a href="https://www.npmjs.com/package/gulp-angular-templatecache" target="_blank">gulp-angular-templatecache</a>
* cssスプライトを作成・・・<a href="https://www.npmjs.com/package/gulp.spritesmith" target="_blank">gulp.spritesmith</a>