Grunt Front Osaka vol1 の LT

1. WebStorm+Grunt
+CoffeeScript+TypeScript
最近こんな感じでやってます

2. たなかひさてる
@tanakahisateru
Pinoco developer
PHPTAL contributor
Firebug translation contributor
Yii framework user

3. はじめました

5. 8.0 で Grunt サポート!!
やったブヒー

7. module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
clean: {
demo: ['build/*']
},
cssmin: {
demo: {
files: {
'build/css/demo.min.css': [
'src/css/app.css',
'src/css/style.css'
]
}
}
},
uglify: {
demo: {
options: {
sourceMap: true
},
files: {
'build/js/demo.min.js': [
'src/js/app.js',
'src/js/util.js'
],
'build/asset/underscore/underscore.min.js': [
'build/asset/underscore/underscore.js'
]
}
}
},

8. module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
clean: {
demo: ['build/*']
},
cssmin: {
demo: {
files: {
'build/css/demo.min.css': [
'src/css/app.css',
'src/css/style.css'
]
}
}
},
uglify: {
demo: {
options: {
sourceMap: true
},
files: {
'build/js/demo.min.js': [
'src/js/app.js',
'src/js/util.js'
],
'build/asset/underscore/underscore.min.js': [
'build/asset/underscore/underscore.js'
]
}
}
},
末尾はカンマだめ
このへんがウザい

9. ないわー
閉じカッコとかないわー
普通インデント使うわー
ケツカンマ禁止とかまじないわー
JSONとか人間が書くもんちゃうでー
YAML使うわ―

11. CoffeeScriptの文法
• 文法的に末尾カンマ許可
• 改行が要素の区切りと解釈される
• インデントで構文が組める
• 改行を使うとオブジェクトの中括弧がなくてもOK

12. module.exports = (grunt) ->
!
grunt.initConfig
pkg: grunt.file.readJSON 'package.json'
clean:
demo:
['build/*']
cssmin:
demo:
files:
'build/css/demo.min.css': [
‘src/css/app.css',
‘src/css/style.css',
]
uglify:
demo:
options:
sourceMap: true
files:
'build/js/demo.min.js': [
'src/js/app.js'
'src/js/util.js'
]
'build/asset/underscore/underscore.min.js': [
'build/asset/underscore/underscore.js'
]
あるとき
ないとき
スッキリ

13. ケツカンマフリー
,

14. ]
}
}
},

15. ※ プログラミング
には使っていません

17. アンダースコア、まあこれはこれでイイけどさぁ…
ユーザーライブラリの関数定義読むJSのIDEって
だけですごいのはいいんだけど

18. 本当は _.map() のほうが好きなんだ

19. 無反応orz

20. _.mapの定義
// Return the results of applying the iterator to each element.
// Delegates to **ECMAScript 5**'s native `map` if available.
_.map = _.collect = function(obj, iterator, context) {
var results = [];
/* 略 */
return results;
};
あーこれじゃ _.collect = function() しか認識しないよ

21. JavaScript自由すぎ
このIDE殺しめ

23. class Greeter<T> {
greeting: T;
constructor(message: T) {
this.greeting = message;
}
greet() {
return this.greeting;
}
}
!
var greeter = new Greeter<string>("Hello, world");
カッチカチですね

24. で、この文法でインターフェース定義だけ集める
プロジェクトがありまして
https://github.com/borisyankov/DefinitelyTyped
*.d.ts

25. TSD

26. tsd query underscore —-action install —-save⏎
npm install tsd —-global⏎

27. *.d.ts の中身
interface UnderscoreStatic {
!
/**
* Produces a new array of values by mapping each …
*
* @param list Maps the elements of this array.
* @param iterator Map iterator function for each element in `list`.
* @param context `this` object in `iterator`, optional.
* @return The mapped array result.
**/
map<T, TResult>(
list: _.List<T>,
iterator: _.ListIterator<T, TResult>,
context?: any): TResult[];
(こんな感じでいっぱい書いてある)

28. こうなってこれが

29. こんなことも!

30. おーいみんな同じバージョンの typings 共有できるよー
tsd の —-save オプションで tsd.json ができてて、
これ使うと npm の packages.json みたいに…
grunt.loadNpmTask ‘grunt-tsd’
grunt tsd⏎
npm install grunt-tsd⏎
全自動ダウンロードやっほい♪

31. ※ プログラミング
には使っていません

32. まだ *.js でがんばる理由
• CoffeeScript も TypeScript もブラウザでそのまま
実行できない。ビルドが必要
• 新しい言語の文法を知らない人でも開発できるように
• 「Sass使ってるのにCSS直で書き換えんな」事件
• どうせブラウザのデバッグコンソールじゃ
JavaScript の構文で考えることになるし

33. オチ

34. えーとえーと、
ライブラリ検索パスの設定どこだったかなー

35. あれ? WebStorm の設定ダイアログに Download って…