GruntとgulpでBower環境を作る

前回のエントリー（Gruntとgulp、それぞれのライブリロード環境の作り方 - なにか作る）に続いて Bower を使うための環境も Grunt と gulp それぞれで構築してみた。

前提条件

以下のソフトウェアがインストールされていること。

• Node.js および npm
• Grunt
• gulp
• Bower

ディレクトリ構造

webapp
├─app
│  └─lib
├─bower.json
└─package.json

webappディレクトリ上でnpm initとbower initを実行して、package.json と bower.json を作っておく。

Grunt

npm install grunt grunt-bower-task --save-dev

// Gruntfile.js
module.exports = function(grunt) {
  grunt.initConfig({
    bower: {
      install: {
        options: {
          targetDir: './app/lib',
          layout: 'byComponent',
          install: true,
          verbose: true,
          cleanTargetDir: true,
          cleanBowerDir: false
        }
      }
    }
  });
  grunt.loadNpmTasks('grunt-bower-task');
  grunt.registerTask('default', ["bower"]);
};

// bower.json（抜粋）
  "dependencies": {
    "joint": "~0.9.0",
    "jquery": "~2.1.1",
    "backbone": "~1.1.2",
    "lodash": "~2.4.1",
    "json2": "*"
  },
  "exportsOverride": {
    "joint": {
      "js": "dist/joint.clean.min.js",
      "css": "dist/joint.min.css"
    },
    "json2": {
      "js": "json2.js"
    },
    "lodash": {
      "js": "dist/lodash.underscore.min.js"
    }
  },

gulp

npm install gulp gulp-filter main-bower-files del --save-dev

// gulpfile.js
var gulp = require('gulp');
var gulpFilter = require('gulp-filter');
var mainBowerFiles = require('main-bower-files');
var del = require('del');

gulp.task('clear-libs', function() {
    del.sync('app/lib/');
});

gulp.task('bower', ['clear-libs'], function() {
    var jsFilter = gulpFilter('**/*.js');
    var cssFilter = gulpFilter('**/*.css');

    return gulp.src(mainBowerFiles())
        .pipe(jsFilter)
        .pipe(gulp.dest('app/lib/js'))
        .pipe(jsFilter.restore())
        .pipe(cssFilter)
        .pipe(gulp.dest('app/lib/css'));
});

gulp.task('default', ['bower']);

// bower.json（抜粋）
  "dependencies": {
    "joint": "~0.9.0",
    "jquery": "~2.1.1",
    "backbone": "~1.1.2",
    "lodash": "~2.4.1",
    "json2": "*"
  },
  "overrides": {
    "joint": {
      "main": ["dist/joint.clean.min.js", "dist/joint.min.css"]
    },
    "json2": {
      "main": "json2.js"
    },
    "lodash": {
      "main": "dist/lodash.underscore.min.js"
    }
  }

これは gulp ちょっと苦労した。もしかしたらもっと楽にできるプラグインがあるかもしれない。

Grunt と gulp それぞれディレクトリ構成も違っちゃったけれど、これを合わせるとなると、またちょっと骨が折れるかもしれない。