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が追加される。

package.json

  "devDependencies": {
    "gulp": "^3.9.0"
  },

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

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

使い方

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

①gulpを読み込む

gulpfile.js

var gulp = require("gulp");

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

gulpfile.js

var hogehoge = require("hogehoge");

③タスクの登録を行う

gulpfile.js

gulp.task("hogehoge", function() {
});

④タスクを実行する対象ファイルを指定する

gulpfile.js

gulp.task("hogehoge", function() {
   gulp.src("hogehoge/**/*html")
});

⑤指定したファイルに対して実行したい処理指定する

gulpfile.js

gulp.task("hogehoge", function() {
   gulp.src("hogehoge/**/*html")
　　　　.pipe(hogehoge())
});

⑥出力先を指定する

gulpfile.js

gulp.task("hogehoge", function() {
   gulp.src("hogehoge/**/*html")
　　　　.pipe(hogehoge())
　　　　.pipe(gulp.dest('./dest'));
});

ローカルサーバーを立てる（gulp-connect編）

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

npm install gulp-connect --save-dev 

②プラグインを読み込む

gulpfile.js

var concat = require("gulp-concat");

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

gulpfile.js

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

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

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

npm install browser-sync --save-dev

②プラグインを読み込む

gulpfile.js

var browser = require("browser-sync");

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

gulpfile.js

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

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

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

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の結合順序を指定したい場合は下記のように配列で指定するのかな・・・

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

②抽出ファイル一覧を取得

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()を実行することで、対象ファイルを圧縮できます。

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

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

gulp.js

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

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

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で利用する。

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のコンパイル・・・gulp-sass
• ファイルの結合・・・gulp-concat
• ファイルの圧縮・・・gulp-uglify
• ローカルサーバー・・・gulp-connect
• ローカルサーバー(こっちのほうがいいかも）・・・browser-sync
• bower.jsonのmainファイルを読み込む・・・main-bower-files
• template用のhtmlファイルを一つにまとめる・・・gulp-angular-templatecache
• cssスプライトを作成・・・gulp.spritesmith