Bower で入れたBootstrapのCSSとJSをGulpで開発環境に持ってきたい。

f:id:kikiki-kiki:20150824161822p:plain

パッケージマネージャーのBowerでBootstrapをインストールして、Gulpを使ってBootstrapのCSSとjavascriptを開発ディレクトリに持ってくる方法のメモ。
npmを使うのでnode.jsを前もってインストールしておく必要があります。

プロジェクトの準備

$ npm init

npm initでpackage.jsonを作成します。　

BowerでBootstrapをインストール

Bowerをインストールしてない場合はインストールします

$ npm install -g bower

Bowerを使うために初期化してします

$ bower init

適当にリターンキーを押して、初期化が完了するとbower.jsonがディレクトリに作成されます。

BowerでBootstrapをインストール

$ bower install --save bootstrap

Gulpを準備

$ npm install --save-dev gulp

必要なパッケージをインストールする

gulp-concat ファイルを結合するプラグイン
gulp-rename リネームするプラグイン
gulp-less Bootstrapのコアファイルがlessなのでlessをコンパイルするプラグイン
gulp-minify-css CSSをmin化するプラグイン
gulp-uglify javascriptをmin化するプラグイン
gulp-filter フィルター
main-bower-files bower.jsonファイルを読みdependenciesで定義されたパッケージのコアファイルを返す

$ npm install --save-dev gulp-concat
$ npm install --save-dev gulp-rename
$ npm install --save-dev gulp-less
$ npm install --save-dev gulp-minify-css
$ npm install --save-dev gulp-uglify
$ npm install --save-dev gulp-filter
$ npm install --save-dev gulp-bower-files
$ npm install --save-dev main-bower-files

最初はちょっとインストールするコマンドが多いけど、次回からは使いまわす場合はpackage.jsonをコピーして、npm installしてあげるだけでOK。　

Gulpのタスクファイルをつくる

gulpfile.jsを作成

$ touch gulpfile.js

gulpfile.jsに処理を書いていきます。

// gulpと使用するプラグインを読み込む
var gulp = require("gulp"),
    concat = require("gulp-concat"),
    rename = require('gulp-rename'),
    less = require('gulp-less'),
    minifyCss = require("gulp-minify-css"),
    uglify = require("gulp-uglify"),
    gulpFilter = require('gulp-filter'),
    bower = require('main-bower-files'),

// bowerで導入したパッケージのCSSを取ってくるタスク
gulp.task('bowerCSS', function() {
  var cssLibDir = 'dev/assets/css/lib/', // cssを出力するディレクトリ
      cssFilter  = gulpFilter('**/*.css', {restore: true}),
      lessFilter = gulpFilter('**/*.less', {restore: true}); // Bootstrapのコアがlessなのでlessをファイルを抽出するフィルター
  return gulp.src( bower({
      paths: {
        bowerJson: 'bower.json'
      }
    }) )
    .pipe( cssFilter )
    .pipe( rename({
      prefix: '_',
      extname: '.css'
    }) )
    .pipe( gulp.dest(cssLibDir) )
    .pipe( cssFilter.restore )
    // LESSファイルを抽出
    .pipe( lessFilter )
    // LESSをコンパイル
    .pipe( less() )
    .pipe( rename({
      prefix: '_',
      extname: '.css'
    }) )
    // filter.restoreする前にgulp.destで出力しないとフィルター外のファイルも出力されてしまう
    .pipe( gulp.dest(cssLibDir) )
    .pipe( lessFilter.restore );
});

// パッケージのCSSを1つに結合してmin化するタスク
gulp.task('bowerCSS.concat', ['bowerCSS'] ,function() {
  var cssDir = 'dev/assets/css/', // 結合したcssを出力するディレクトリ
      cssLibDir = 'dev/assets/css/lib/'; // ライブラリのCSSが置いてあるディレクトリ
  return gulp.src(cssLibDir + '_*.css')
    .pipe( concat('_bundle.css') )
    // CSSを1つにしたものを出力
    .pipe( gulp.dest(cssDir) )
    .pipe( minifyCss() )
    .pipe( rename({
      extname: '.min.css'
    }) )
    // CSSを1つにしてmin化したものを出力
    .pipe( gulp.dest(cssDir) );
});

// bowerで導入したパッケージのjsを取ってきて1つにまとめるタスク
gulp.task('bowerJS', function() {
  var jsDir = 'dev/assets/js/', // jsを出力するディレクトリ
      jsFilter = gulpFilter('**/*.js', {restore: true}); // jsファイルを抽出するフィルター
  return gulp.src( bower({
      paths: {
        bowerJson: 'bower.json'
      }
    }) )
    .pipe( jsFilter )
    .pipe( concat('_bundle.js') )
    // jsを1つにしたものを出力
    .pipe( gulp.dest(jsDir) )
    .pipe( uglify({
      // !から始まるコメントを残す
      preserveComments: 'some'
    }) )
    .pipe( rename({
      extname: '.min.js'
    }) )
    // jsを1つにしてmin化したものを出力
    .pipe( gulp.dest(jsDir) )
    .pipe( jsFilter.restore );
});

// bowerのCSSとJSを取ってくるタスク
gulp.task('bower.init', ['bowerCSS', 'bowerCSS.concat','bowerJS']);