GulpでRollup

gulp-rollupを使ってgulpでrollupを利用する方法を紹介します。

Rollupとは

この記事が参考になります。

Rollupがちょうどいい感じ

gulp-rollupの導入

gulp-rollupをインストール

$ npm install --save-dev gulp-rollup

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

たとえばこのあたり

• rollup-plugin-babel
• babel-preset-es2015-rollup
• rollup-plugin-node-resolve
• rollup-plugin-commonjs

$ npm install --save-dev rollup-plugin-babel babel-preset-es2015-rollup rollup-plugin-node-resolve rollup-plugin-commonjs

babelの設定

.babelrc

{
  "presets": [
    ["es2015", { "modules": false }]
  ]
}

gulpfile.jsの設定

gulpfile.js

"use strict";

var gulp = require('gulp'),
    rollup = require('gulp-rollup'),
    nodeResolve = require('rollup-plugin-node-resolve'),
    commonjs = require('rollup-plugin-commonjs'),
    rename = require('gulp-rename'),
    babel = require('rollup-plugin-babel');

gulp.task('rollup', function() {
  return gulp.src('./src/**/*.js')
    .pipe( rollup( {
      entry: './src/main.js',
      format: 'umd',
      moduleName: 'sample_module',  // formatがumd/iifeのとき必須。
      plugins: [
        nodeResolve(), // node_modulesから読み込む
        commonjs(),    // CommonJSをES6モジュールに
        babel()        // バベル
      ]
    } ) )
    .pipe('bundle.js')
    .pipe(gulp.dest('./dist'));
} );

gulp-rollupを使う上で注意することは、
rollupをJavaScript APIで実行した場合出力する方法として以下の2種類があります。

• bundle.write(): 上記のようにファイルに出力
• bundle.generate(): ファイルに出力せず、文字列を返す

gulp-rollupでは上記のbundle.generate()で出力しているのでgulp.destを使ってファイルとして出力する必要があります。

ファイル名を変えたい場合はgulp-renameで。

参考: http://qiita.com/cognitom/items/e3ac0da00241f427dad6#2-javascript-api%E7%B7%A8

オプション

一般的なrollupのオプションに加えて、rollupオプションを指定することで任意のrollupのバージョンで実行することができます。

gulpfile.js

gulp.src('./src/**/*.js')
  .pipe(rollup({
    rollup: require('rollup'), // 任意のバージョン
    entry: './src/main.js'
  }))
  //...