LoginSignup
7

More than 5 years have passed since last update.

GulpでRollup

Last updated at Posted at 2016-12-19

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7