Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

概要

  • ビルドツール : 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']);
massa142
Programming / Perfume / Lacrosse
http://massa142.github.io/
squeeze-inc
「価値の詰まった社会を創る」をビジョンに掲げ、民泊・宿泊チャネルの全物件情報・予約情報・顧客情報を一元管理できる『suitebook』を運営しています。
https://squeeze-inc.co.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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした