もくじ
- 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^￣
おしまい
