---
title: BrowserifyをGulpで実行
tags: ["Browserify", "Gulp", "JavaScript"]
categories: ["Programming", "JavaScript", "Browserify"]
date: 2014-12-28T05:09:48Z
updated: 2014-12-28T05:09:48Z
---

[前回](http://blog.ik.am/#/entries/305)の続き。今度は`browserify`コマンドをいちいち叩くのではなく、gulpでビルドする。

### Gulpインストール

``` bash
$ npm install -g gulp
```

### プロジェクト作成

`npm init`で全部デフォルト値を入力する。

``` bash
$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sane defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (hello)
version: (0.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to /Users/maki/work/hello/package.json:

{
  "name": "hello",
  "version": "0.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this ok? (yes) yes
```

### ビルドに必要な物をインストール

``` bash
$ npm install --save-dev browserify gulp vinyl-source-stream
```

`package.json`は以下のようになる。

``` javascript
{
  "name": "hello",
  "version": "0.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "browserify": "^8.0.2",
    "gulp": "^3.8.10",
    "vinyl-source-stream": "^1.0.0"
  }
}
```
### Gulpfile作成

`Gulpfile.js`を作成して、以下のように記述する。

``` javascript
var browserify = require('browserify');
var gulp = require('gulp');
var source = require('vinyl-source-stream');

gulp.task('browserify', function () {
    return browserify('./index.js', {debug: true})
        .bundle()
        .pipe(source('bundle.js'))
        .pipe(gulp.dest('./'));
});
```

`{debug: true}`をつけるとSourceMapが出力される。

### ビルド実行

``` bash
$ gulp browserify
```

`bundle.js`ができた。

``` javascript
(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
var Greeter = require('./greeter.js');
var greeter = new Greeter('World');
console.log(greeter.greet());
},{"./greeter.js":2}],2:[function(require,module,exports){
function Greeter(greeting) {
    this.greeting = greeting;
};
Greeter.prototype.greet = function() {
    return 'Hello ' + this.greeting + '!';
};

module.exports=Greeter;

},{}]},{},[1])
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm5vZGVfbW9kdWxlcy9icm93c2VyaWZ5L25vZGVfbW9kdWxlcy9icm93c2VyLXBhY2svX3ByZWx1ZGUuanMiLCJpbmRleC5qcyIsImdyZWV0ZXIuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7QUNBQTtBQUNBO0FBQ0E7O0FDRkE7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBIiwiZmlsZSI6ImdlbmVyYXRlZC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzQ29udGVudCI6WyIoZnVuY3Rpb24gZSh0LG4scil7ZnVuY3Rpb24gcyhvLHUpe2lmKCFuW29dKXtpZighdFtvXSl7dmFyIGE9dHlwZW9mIHJlcXVpcmU9PVwiZnVuY3Rpb25cIiYmcmVxdWlyZTtpZighdSYmYSlyZXR1cm4gYShvLCEwKTtpZihpKXJldHVybiBpKG8sITApO3ZhciBmPW5ldyBFcnJvcihcIkNhbm5vdCBmaW5kIG1vZHVsZSAnXCIrbytcIidcIik7dGhyb3cgZi5jb2RlPVwiTU9EVUxFX05PVF9GT1VORFwiLGZ9dmFyIGw9bltvXT17ZXhwb3J0czp7fX07dFtvXVswXS5jYWxsKGwuZXhwb3J0cyxmdW5jdGlvbihlKXt2YXIgbj10W29dWzFdW2VdO3JldHVybiBzKG4/bjplKX0sbCxsLmV4cG9ydHMsZSx0LG4scil9cmV0dXJuIG5bb10uZXhwb3J0c312YXIgaT10eXBlb2YgcmVxdWlyZT09XCJmdW5jdGlvblwiJiZyZXF1aXJlO2Zvcih2YXIgbz0wO288ci5sZW5ndGg7bysrKXMocltvXSk7cmV0dXJuIHN9KSIsInZhciBHcmVldGVyID0gcmVxdWlyZSgnLi9ncmVldGVyLmpzJyk7XG52YXIgZ3JlZXRlciA9IG5ldyBHcmVldGVyKCdXb3JsZCcpO1xuY29uc29sZS5sb2coZ3JlZXRlci5ncmVldCgpKTsiLCJmdW5jdGlvbiBHcmVldGVyKGdyZWV0aW5nKSB7XG4gICAgdGhpcy5ncmVldGluZyA9IGdyZWV0aW5nO1xufTtcbkdyZWV0ZXIucHJvdG90eXBlLmdyZWV0ID0gZnVuY3Rpb24oKSB7XG4gICAgcmV0dXJuICdIZWxsbyAnICsgdGhpcy5ncmVldGluZyArICchJztcbn07XG5cbm1vZHVsZS5leHBvcnRzPUdyZWV0ZXI7XG4iXX0=
```

[次回](http://blog.ik.am/#/entries/307)はbowerと連携する。