ビルドが必要なほど大きいものを書いていないけど今後必要になりそうなので試してみた
前提
- npm導入済
browserifyとgulpをインストール
$ npm install -g browserify
$ npm install -g gulp
プロジェクトの作成と必要なライブラリの導入
$ mkdir build_test
$ cd build_test/
$ mkdir build
$ mkdir src
$ npm init
$ npm install --save-dev gulp browserify coffee-script coffeeify vinyl-souce-stream
JavaScriptのビルド
下記のようなjsをビルドする。
src/foo.js
function Foo(x, y){
this.x = x;
this.y = y;
}
Foo.prototype = {
sum: function() {
return this.x + this.y;
}
};
module.exports = Foo;
src/sample.js
var Foo = require('./foo');
var foo = new Foo(10, 20);
console.log(foo);
console.log(foo.sum());
用意する gulpfile.coffee
はこんな感じ。
gulpfile.coffee
gulp = require 'gulp'
source = require 'vinyl-source-stream'
browserify = require 'browserify'
gulp.task 'build', ->
browserify
entries: ['./src/sample.js']
.bundle()
.pipe source 'bundle.js'
.pipe gulp.dest 'build'
gulp.task 'default', ['build']
ビルドを実行
$ gulp
[14:19:01] Requiring external module coffee-script/register
[14:19:01] Using gulpfile ~/build_test/gulpfile.coffee
[14:19:01] Starting 'build'...
[14:19:01] Finished 'build' after 81 ms
[14:19:01] Starting 'default'...
[14:19:01] Finished 'default' after 23 μs
実行してできあがる bundle.js
はこうなる。
dest/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){
function Foo(x, y){
this.x = x;
this.y = y;
}
Foo.prototype = {
sum: function() {
return this.x + this.y;
}
};
module.exports = Foo;
},{}],2:[function(require,module,exports){
var Foo = require('./foo');
var foo = new Foo(10, 20);
console.log(foo);
console.log(foo.sum());
},{"./foo":1}]},{},[2]);
CoffeeScriptのビルド
Bar.coffee
class Bar
constructor: (x, y) ->
@x = x
@y = y
sum: ->
@x + @y
module.exports = Bar
example.coffee
Bar = require './Bar'
bar = new Bar(10, 20)
console.log(bar)
console.log(bar.sum())
用意する gulpfile.coffee
gulpfile.coffee
gulp = require 'gulp'
source = require 'vinyl-source-stream'
browserify = require 'browserify'
gulp.task 'build', ->
browserify
entries: ['./src/example.coffee']
extensions: ['.coffee']
.transform 'coffeeify'
.bundle()
.pipe source 'bundle2.js'
.pipe gulp.dest 'build'
gulp.task 'default', ['build']
ビルドを実行
$ gulp
[14:13:48] Requiring external module coffee-script/register
[14:13:48] Using gulpfile ~/build_test/gulpfile.coffee
[14:13:48] Starting 'build'...
[14:13:48] Finished 'build' after 99 ms
[14:13:48] Starting 'default'...
[14:13:48] Finished 'default' after 21 μs
できあがったbundle2.js
build/bundle2.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 Bar;
Bar = (function() {
function Bar(x, y) {
this.x = x;
this.y = y;
}
Bar.prototype.sum = function() {
return this.x + this.y;
};
return Bar;
})();
module.exports = Bar;
},{}],2:[function(require,module,exports){
var Bar, bar;
Bar = require('./Bar');
bar = new Bar(10, 20);
console.log(bar);
console.log(bar.sum());
},{"./Bar":1}]},{},[2]);
ファイルの変更を監視してビルド
gulpfile.coffee
に以下を追加する。
src/
以下の.coffeeファイルが変更されると build
が実行される。
gulp.task 'watch', ->
gulp.watch 'src/*.coffee', ['build']
参考
gulpとBrowserifyでJSをビルドしてみた - Qiita
Browserify + GulpでクライアントのJavaScript / CoffeeScriptでrequire | EasyRamble
npm とか bower とか一体何なんだよ!Javascript 界隈の文脈を理解しよう - Qiita