読者です 読者をやめる 読者になる 読者になる

DRYな備忘録

Don't Repeat Yourself.

TypeScriptのビルドにgruntじゃなくてgulpを使ってみるおじさんのメモ

もくじ

  • gruntだと
  • npm install -g gulp
  • gulpfile.js
  • 実行してみる
  • gulpfile.coffee
  • TypeScriptのビルドをたのむ

gruntだと

gruntでこういうプロジェクトつくるワケ

myproject
├── package.json
├── Gruntfile.coffee
├── build
│   └── app.js
└── src
    └── sample.ts

package.json

{
  "name": "my",
  "version": "0.0.1",
  "devDependencies": {
    "grunt": "*",
    "grunt-typescript": "*"
  }
}

Gruntfile.coffee

module.exports = (grunt) ->
    grunt.initConfig
        pkg: grunt.file.readJSON 'package.json'
        typescript:
            # tsファイルをひとつのjsにする
            build:
                src: [
                    'src/**/*.ts'
                ]
                dest: 'build/app.js'
    grunt.loadNpmTasks 'grunt-typescript'

    grunt.registerTask 'build', 'build/app.jsをつくる',['typescript:build']

これと同じことをgulpでやってみるよ

npm install -g gulp

% nvm ls

   v0.11.9
current:        v0.11.9
default -> v0.11.9
% npm --version
1.3.15
% npm install -g gulp
# 略
% which gulp
/Users/otiai10/.nvm/v0.11.9/bin/gulp
% gulp --help
[21:11:13] No local gulp install found in ~/proj/js/myproj
[21:11:13] Try running: npm install gulp

ぁん?npmでローカルにinstallしてもいいんだけど「プロジェクトをつくる」のが今回の目的なのでわざわざpackage.jsonに書くよ。

--- package.json.origin 2014-06-05 21:12:38.000000000 +0900
+++ package.json        2014-06-05 21:12:49.000000000 +0900
@@ -2,6 +2,7 @@
   "name": "my",
   "version": "0.0.1",
   "devDependencies": {
+    "gulp": "*",
     "grunt": "*",
     "grunt-typescript": "*"
   }

で、npm installしたのち

% gulp --help
[21:14:17] No gulpfile found
% gulp help
[21:14:22] No gulpfile found
%

ん?help。help me。

gulpfile.jsってのを作んのねオッケーおじさん作っちゃうよ

gulpfile.js

var gulp = require('gulp');

gulp.task('default', function() {
    console.log("いぇーい!がるぷだヨ♪");
});

実行してみる

% gulp
[21:19:39] Using gulpfile ~/proj/js/myproj/gulpfile.js
[21:19:39] Starting 'default'...
いぇーい!がるぷだヨ♪
[21:19:39] Finished 'default' after 148 μs

おお

gulpfile.coffee

せっかくなのでcoffeeでgulpfileをつくってみたいじゃない

gulpfile.coffee

gulp = require 'gulp'

gulp.task 'default', () ->
    console.log "いぇーい!がるぷだヨ♪"

で、gulpfile.jsが同ディレクトリにある場合は-require coffee-scriptを与えてコマンド打たなきゃいけないっぽいので、rm gulpfile.jsしてから実行すると

% gulp
[21:29:34] Requiring external module coffee-script/register
[21:29:34] Using gulpfile ~/proj/js/myproj/gulpfile.coffee
[21:29:34] Starting 'default'...
いぇーい!がるぷだヨ♪
[21:29:34] Finished 'default' after 196 μs

いけた

TypeScriptのビルドをたのむ

diff -u package.json.origin package.json

--- package.json.origin 2014-06-05 21:12:49.000000000 +0900
+++ package.json        2014-06-05 21:35:33.000000000 +0900
@@ -3,7 +3,6 @@
   "version": "0.0.1",
   "devDependencies": {
     "gulp": "*",
-    "grunt": "*",
-    "grunt-typescript": "*"
+    "gulp-tsc": "*"
   }
 }

で、gulpfile.coffeeはこんな感じか?

gulp = require 'gulp'
tsc  = require 'gulp-tsc'

gulp.task 'build', () ->
    gulp.src 'src/**/*.ts'
    .pipe tsc
        out:'app.js'
    .pipe gulp.dest 'build'

実行すると

% gulp build
[21:55:46] Requiring external module coffee-script/register
[21:55:47] Using gulpfile ~/proj/js/myproj/gulpfile.coffee
[21:55:47] Starting 'build'...
[21:55:47] Compiling TypeScript files using tsc version 0.9.1.1
[21:55:48] Finished 'build' after 1.79 s
myproj
├── package.json
├── gulpfile.coffee
├── build
│   └── app.js
└── src
    └── sample.ts

いいと思います!

雑感

おじさん別にgruntに問題意識無いからgruntでいいんだけどね。あと、どうでもいいけど

% gulp
[21:19:39] Using gulpfile ~/proj/js/myproj/gulpfile.js
[21:19:39] Starting 'default'...
いぇーい!がるぷだヨ♪
[21:19:39] Finished 'default' after 148 μs
[21:19:39] Finished 'default' after 148 μs
μs





_人人人人人人人人_
> 突然のラブライブ
 ̄^ Y^ Y^ Y^ Y^ Y^ Y^ ̄

f:id:otiai10:20140605221153j:plain

おしまい