gulp × TypeScript × Browserifyな開発環境構築

  • 79
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

概要

  • ビルドツール : gulp
  • altJS    : TypeScript
  • モジュール管理: Browserify

以下で説明していく開発環境のひな形はGitHubに置いてありますm(_ _)m
https://github.com/massa142/typescript-devenv

前提

Node.jsインストール済み。
Node.jsのインストール方法に関しては、以下の記事が詳しいのでご参照ください。
node.jsのversionを管理するためにnodebrewを利用する - Qiita

参考にしたもの

TypeScriptリファレンス Ver.1.0対応
gulpでbrowserifyを使う | 4uing

Usage

  1. npm install
  2. gulp tsd
  3. gulp (tsc| browserify | watch| minify)

ファイル構成

root
├── src
│   ├── js               - コンパイルされたjsファイル
│   ├── ts               - TypeScriptファイル
│   ├── typings          - TypeScript型定義ファイル
│   └── tsd.json         - TypeScript型定義ファイルパッケージ
├── dest
│   └── js               - browserifyによってビルドされたjsファイル
│       └── min         - minifyされたjsファイル
├── gulp
│   ├── tasks
│   ├── config.js
│   └── gulpfile.js
├── node_modules
└── package.json

gulpタスク

tsd.js

tsd.jsonで指定したTypeScript型定義ファイルをinstallしてくる。

var gulp = require('gulp');
var tsd = require("gulp-tsd");

gulp.task("tsd", function (callback) {
    tsd({
        command: "reinstall",
        config: "../src/tsd.json"
    }, callback);
});

tsc.js

TypeScriptコンパイラの役割をしてくれる。

var gulp = require('gulp');
var typescript = require('gulp-typescript');
var config = require('../config');

gulp.task('tsc', function(){
    gulp.src(config.ts.src)
        .pipe(typescript(config.ts.options))
        .js
        .pipe(gulp.dest(config.ts.dest));
});

※ IntelliJ IDEA(version 13以上)を使う場合は、以下の設定でもOK
(EcripseやWebStormもTypeScript用のプラグインが勿論ありますが、今回はIntelliJを取り上げました)

  • 「NodeJS」「File Watchers」プラグインをインストール
  • [Preferences] → [Languages & Frameworks] → [TypeScript]の設定をする
  1. [Node interpreter]にnode.jsのパスを指定。nodebrewを利用している場合は~/.nodebrew/current/bin/nodeといった感じ。
  2. [Generate source maps]をお好みで設定。(今回はチェックを外す)
  3. [Command line options]に--module commonjs --noImplicitAny を記述。(--module amdでAMD指定のコンパイルも可能。--noImplicitAnyは暗黙的なany型が存在する場合にコンパイルエラーを出してくれるオプションです。)
  4. [Use output path]に上記のファイル構成のsrc/jsに相当するパスを指定。
  5. [Enable TypeScript Compiler]にチェック。

browserify.js

Browserifyでのビルドを行う。sourcemap付きでやってます。

var gulp = require('gulp');
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var sourcemaps = require('gulp-sourcemaps');
var config = require('../config');

gulp.task('browserify', function(){
    return browserify(config.browserify.entry)
        .bundle()
        .pipe(source(config.browserify.output.filename))
        .pipe(buffer())
        .pipe(sourcemaps.init({loadMaps: true}))
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest(config.browserify.dest));
});

watch.js

src/ts配下のファイルに変更があれば、自動でTypeScriptコンパイル&Browserifyビルドがされるように。

var gulp = require('gulp');
var watch = require('gulp-watch');
var config = require('../config');

gulp.task('watch', function () {
    // IDEの恩恵を授かる場合は、以下の3行をコメントアウト
    watch(config.watch.ts, function () {
        gulp.start(['tsc']);
    });

    watch(config.watch.js, function () {
        gulp.start(['browserify']);
    });
});

minify.js

dest/js配下のjsファイルを全てminifyしてくれる。

var gulp = require('gulp');
var jsmin = require('gulp-jsmin');
var rename = require('gulp-rename');
var config = require('../config');

gulp.task('minify', function () {
    gulp.src(config.js.src)
        .pipe(jsmin())
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest(config.js.dest));
});

default.js

gulpと打つだけで、gulp watchが走るように。

var gulp = require('gulp');

gulp.task('default', ['watch']);