LoginSignup
76

More than 5 years have passed since last update.

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

Last updated at Posted at 2015-05-07

概要

  • ビルドツール : 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']);

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
76