TypeScript+Browserify用gulpfile.js

TypeScriptをモジュール単位でファイル分割し、かつブラウザ向けに本格的に開発できるようにするためにはトランスパイルしBrowserifyする、という複雑なアクションの定義が必要。
最近はgulpを使ってビルドアクションを定義するのがメジャーらしく、自分なりにgulpfile.jsを書いてみた。

今回こちらのページを参考にした。

gulp + browserify

gulpfile.jsを使うにはgulpが必要。npmでインストールしておく。
また、一般的に使うモジュールも併せてインストールする。

npm install browserify --save-dev
npm install gulp gulp-concat gulp-typescript vinyl-source-stream --save-dev

gulpfile.js

gulpで実行すべきアクションを定義するJavaScriptファイル。
指定することも可能だが、標準ではカレントディレクトリのgulpfile.jsを使用するので、流儀に従いgulpfile.jsという名前で作成する。

以下は./src/**/*.tsをトランスパイルし、それらを一つにまとめて./js/bundle.jsを作る例。

var gulp = require('gulp');
var gulpTypeScript = require('gulp-typescript');
var gulpConcat = require('gulp-concat');
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var fs = require('fs');
var path = require('path');



/* FIX VALUES FOR YOUR ENVIRONMENT */
var TSCONFIG_PATH = './src/tsconfig.json';
var INPUT_DIR_PATH = './src';
var INPUT_EXCEPTION_PATTERNS = [];
var OUTPUT_FILE_PATH = './js/bundle.js';



/// gulp transpile
// Transpile TypeScript to JavaScript
gulp.task('transpile', function() {

    var project = gulpTypeScript.createProject(TSCONFIG_PATH);

    /* OBSOLETE */
    //return gulp.src('./**/*.{ts,tsx}')
    //    .pipe(gulpTypeScript(project))
    //    .js
    //    .pipe(gulp.dest(dirOut));

    return project.src()
        .pipe(project())
        .js
        .pipe(gulp.dest(INPUT_DIR_PATH));
});


/// gulp browserify
gulp.task('browserify', function() {

    fs.readdir(INPUT_DIR_PATH, function(err, files) {
        if(err) {
            throw err;
        }

        var filesToBeBundled = [];
        var regexJS = new RegExp('.+\.js$');
        var regexes = [];
        INPUT_EXCEPTION_PATTERNS.forEach(function(pattern) {
            regexes.push(new RegExp(pattern));
        });

        files.forEach(function(file) {
            var matched = false;
            if(regexJS.test(file)) {
                regexes.forEach(function() {
                    matched &= r.test(file);
                });
                if(!matched) {
                    filesToBeBundled.push(path.join(INPUT_DIR_PATH, file));
                }
            }
        });

        var option = { entries: filesToBeBundled };
        return browserify(option)
            .bundle()
            .pipe(source(OUTPUT_FILE_PATH))
            .pipe(gulp.dest('.'));
    });
});


/// gulp build
gulp.task('build', ['transpile', 'browserify']);

実行

先の例ではbuildタスクでtranspileタスク、browserifyタスクが行えるよう定義しているため、buildタスクを実行する。

gulp build

今回作成したTypeScriptファイルがこちら。

Startup.ts

class Startup {
    public static main(): number {
        console.log('Hello World');
        return 0;
    }
}

export = Startup;

Program.ts

import startup = require('./Startup');

startup.main();

gulp build実行後./js/bundle.jsが生成されて、これをnodeやブラウザで実行すれば、正しく動くことを確認できる。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です