IK.AM

前回の続き。今度はbrowserifyコマンドをいちいち叩くのではなく、gulpでビルドする。

Gulpインストール

$ npm install -g gulp

プロジェクト作成

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

$ 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

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

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

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

{
  "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を作成して、以下のように記述する。

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が出力される。

ビルド実行

$ gulp browserify

bundle.jsができた。

(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=

次回はbowerと連携する。