Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

gulpを使ったJavaScript(とCoffeeScript)のビルド

More than 5 years have passed since last update.

ビルドが必要なほど大きいものを書いていないけど今後必要になりそうなので試してみた

前提

  • 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

speee
株式会社Speeeは「解き尽くす。未来を引きよせる。」というミッションを実現すべく、中長期的な目線で企業価値を最大化させていくため、組織・事業のStyleを大切にした永続的な価値創造を目指しています。
https://www.speee.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away