Edited at

GulpでRollup

More than 1 year has passed since last update.

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'
}))
//...