grunt front-osaka-1-lt-tanaka
DESCRIPTION
Grunt Front Osaka vol1 の LTTRANSCRIPT
![Page 1: Grunt front-osaka-1-lt-tanaka](https://reader034.vdocuments.mx/reader034/viewer/2022051515/54c7395c4a795937458b458d/html5/thumbnails/1.jpg)
WebStorm+Grunt+CoffeeScript+TypeScript
最近こんな感じでやってます
![Page 2: Grunt front-osaka-1-lt-tanaka](https://reader034.vdocuments.mx/reader034/viewer/2022051515/54c7395c4a795937458b458d/html5/thumbnails/2.jpg)
たなかひさてる @tanakahisateru
Pinoco developerPHPTAL contributorFirebug translation contributorYii framework user
![Page 3: Grunt front-osaka-1-lt-tanaka](https://reader034.vdocuments.mx/reader034/viewer/2022051515/54c7395c4a795937458b458d/html5/thumbnails/3.jpg)
はじめました
![Page 4: Grunt front-osaka-1-lt-tanaka](https://reader034.vdocuments.mx/reader034/viewer/2022051515/54c7395c4a795937458b458d/html5/thumbnails/4.jpg)
![Page 5: Grunt front-osaka-1-lt-tanaka](https://reader034.vdocuments.mx/reader034/viewer/2022051515/54c7395c4a795937458b458d/html5/thumbnails/5.jpg)
8.0 で Grunt サポート!!やったブヒー
![Page 6: Grunt front-osaka-1-lt-tanaka](https://reader034.vdocuments.mx/reader034/viewer/2022051515/54c7395c4a795937458b458d/html5/thumbnails/6.jpg)
![Page 7: Grunt front-osaka-1-lt-tanaka](https://reader034.vdocuments.mx/reader034/viewer/2022051515/54c7395c4a795937458b458d/html5/thumbnails/7.jpg)
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' ] } } },
![Page 8: Grunt front-osaka-1-lt-tanaka](https://reader034.vdocuments.mx/reader034/viewer/2022051515/54c7395c4a795937458b458d/html5/thumbnails/8.jpg)
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' ] } } },
末尾はカンマだめ
このへんがウザい
![Page 9: Grunt front-osaka-1-lt-tanaka](https://reader034.vdocuments.mx/reader034/viewer/2022051515/54c7395c4a795937458b458d/html5/thumbnails/9.jpg)
ないわー 閉じカッコとかないわー 普通インデント使うわー
ケツカンマ禁止とかまじないわー JSONとか人間が書くもんちゃうでー
YAML使うわ―
![Page 10: Grunt front-osaka-1-lt-tanaka](https://reader034.vdocuments.mx/reader034/viewer/2022051515/54c7395c4a795937458b458d/html5/thumbnails/10.jpg)
![Page 11: Grunt front-osaka-1-lt-tanaka](https://reader034.vdocuments.mx/reader034/viewer/2022051515/54c7395c4a795937458b458d/html5/thumbnails/11.jpg)
CoffeeScriptの文法
• 文法的に末尾カンマ許可
• 改行が要素の区切りと解釈される
• インデントで構文が組める
• 改行を使うとオブジェクトの中括弧がなくてもOK
![Page 12: Grunt front-osaka-1-lt-tanaka](https://reader034.vdocuments.mx/reader034/viewer/2022051515/54c7395c4a795937458b458d/html5/thumbnails/12.jpg)
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' ]
あるとき
ないとき
スッキリ
![Page 13: Grunt front-osaka-1-lt-tanaka](https://reader034.vdocuments.mx/reader034/viewer/2022051515/54c7395c4a795937458b458d/html5/thumbnails/13.jpg)
ケツカンマフリー
,
![Page 14: Grunt front-osaka-1-lt-tanaka](https://reader034.vdocuments.mx/reader034/viewer/2022051515/54c7395c4a795937458b458d/html5/thumbnails/14.jpg)
] } } },
![Page 15: Grunt front-osaka-1-lt-tanaka](https://reader034.vdocuments.mx/reader034/viewer/2022051515/54c7395c4a795937458b458d/html5/thumbnails/15.jpg)
※ プログラミング には使っていません
![Page 16: Grunt front-osaka-1-lt-tanaka](https://reader034.vdocuments.mx/reader034/viewer/2022051515/54c7395c4a795937458b458d/html5/thumbnails/16.jpg)
![Page 17: Grunt front-osaka-1-lt-tanaka](https://reader034.vdocuments.mx/reader034/viewer/2022051515/54c7395c4a795937458b458d/html5/thumbnails/17.jpg)
アンダースコア、まあこれはこれでイイけどさぁ… ユーザーライブラリの関数定義読むJSのIDEって
だけですごいのはいいんだけど
![Page 18: Grunt front-osaka-1-lt-tanaka](https://reader034.vdocuments.mx/reader034/viewer/2022051515/54c7395c4a795937458b458d/html5/thumbnails/18.jpg)
本当は _.map() のほうが好きなんだ
![Page 19: Grunt front-osaka-1-lt-tanaka](https://reader034.vdocuments.mx/reader034/viewer/2022051515/54c7395c4a795937458b458d/html5/thumbnails/19.jpg)
無反応orz
![Page 20: Grunt front-osaka-1-lt-tanaka](https://reader034.vdocuments.mx/reader034/viewer/2022051515/54c7395c4a795937458b458d/html5/thumbnails/20.jpg)
_.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() しか認識しないよ
![Page 21: Grunt front-osaka-1-lt-tanaka](https://reader034.vdocuments.mx/reader034/viewer/2022051515/54c7395c4a795937458b458d/html5/thumbnails/21.jpg)
JavaScript自由すぎ このIDE殺しめ
![Page 22: Grunt front-osaka-1-lt-tanaka](https://reader034.vdocuments.mx/reader034/viewer/2022051515/54c7395c4a795937458b458d/html5/thumbnails/22.jpg)
![Page 23: Grunt front-osaka-1-lt-tanaka](https://reader034.vdocuments.mx/reader034/viewer/2022051515/54c7395c4a795937458b458d/html5/thumbnails/23.jpg)
class Greeter<T> { greeting: T; constructor(message: T) { this.greeting = message; } greet() { return this.greeting; } } !var greeter = new Greeter<string>("Hello, world");
カッチカチですね
![Page 24: Grunt front-osaka-1-lt-tanaka](https://reader034.vdocuments.mx/reader034/viewer/2022051515/54c7395c4a795937458b458d/html5/thumbnails/24.jpg)
で、この文法でインターフェース定義だけ集める プロジェクトがありまして
https://github.com/borisyankov/DefinitelyTyped
*.d.ts
![Page 25: Grunt front-osaka-1-lt-tanaka](https://reader034.vdocuments.mx/reader034/viewer/2022051515/54c7395c4a795937458b458d/html5/thumbnails/25.jpg)
TSD
![Page 26: Grunt front-osaka-1-lt-tanaka](https://reader034.vdocuments.mx/reader034/viewer/2022051515/54c7395c4a795937458b458d/html5/thumbnails/26.jpg)
tsd query underscore —-action install —-save⏎
npm install tsd —-global⏎
![Page 27: Grunt front-osaka-1-lt-tanaka](https://reader034.vdocuments.mx/reader034/viewer/2022051515/54c7395c4a795937458b458d/html5/thumbnails/27.jpg)
*.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[];
(こんな感じでいっぱい書いてある)
![Page 28: Grunt front-osaka-1-lt-tanaka](https://reader034.vdocuments.mx/reader034/viewer/2022051515/54c7395c4a795937458b458d/html5/thumbnails/28.jpg)
こうなってこれが
![Page 29: Grunt front-osaka-1-lt-tanaka](https://reader034.vdocuments.mx/reader034/viewer/2022051515/54c7395c4a795937458b458d/html5/thumbnails/29.jpg)
こんなことも!
![Page 30: Grunt front-osaka-1-lt-tanaka](https://reader034.vdocuments.mx/reader034/viewer/2022051515/54c7395c4a795937458b458d/html5/thumbnails/30.jpg)
おーいみんな同じバージョンの typings 共有できるよー
tsd の —-save オプションで tsd.json ができてて、 これ使うと npm の packages.json みたいに…
grunt.loadNpmTask ‘grunt-tsd’
grunt tsd⏎
npm install grunt-tsd⏎
全自動ダウンロードやっほい♪
![Page 31: Grunt front-osaka-1-lt-tanaka](https://reader034.vdocuments.mx/reader034/viewer/2022051515/54c7395c4a795937458b458d/html5/thumbnails/31.jpg)
※ プログラミング には使っていません
![Page 32: Grunt front-osaka-1-lt-tanaka](https://reader034.vdocuments.mx/reader034/viewer/2022051515/54c7395c4a795937458b458d/html5/thumbnails/32.jpg)
まだ *.js でがんばる理由• CoffeeScript も TypeScript もブラウザでそのまま実行できない。ビルドが必要
• 新しい言語の文法を知らない人でも開発できるように
• 「Sass使ってるのにCSS直で書き換えんな」事件
• どうせブラウザのデバッグコンソールじゃ JavaScript の構文で考えることになるし
![Page 33: Grunt front-osaka-1-lt-tanaka](https://reader034.vdocuments.mx/reader034/viewer/2022051515/54c7395c4a795937458b458d/html5/thumbnails/33.jpg)
オチ
![Page 34: Grunt front-osaka-1-lt-tanaka](https://reader034.vdocuments.mx/reader034/viewer/2022051515/54c7395c4a795937458b458d/html5/thumbnails/34.jpg)
えーとえーと、 ライブラリ検索パスの設定どこだったかなー
![Page 35: Grunt front-osaka-1-lt-tanaka](https://reader034.vdocuments.mx/reader034/viewer/2022051515/54c7395c4a795937458b458d/html5/thumbnails/35.jpg)
あれ? WebStorm の設定ダイアログに Download って…