Your SlideShare is downloading. ×
0
Grunt front-osaka-1-lt-tanaka
Grunt front-osaka-1-lt-tanaka
Grunt front-osaka-1-lt-tanaka
Grunt front-osaka-1-lt-tanaka
Grunt front-osaka-1-lt-tanaka
Grunt front-osaka-1-lt-tanaka
Grunt front-osaka-1-lt-tanaka
Grunt front-osaka-1-lt-tanaka
Grunt front-osaka-1-lt-tanaka
Grunt front-osaka-1-lt-tanaka
Grunt front-osaka-1-lt-tanaka
Grunt front-osaka-1-lt-tanaka
Grunt front-osaka-1-lt-tanaka
Grunt front-osaka-1-lt-tanaka
Grunt front-osaka-1-lt-tanaka
Grunt front-osaka-1-lt-tanaka
Grunt front-osaka-1-lt-tanaka
Grunt front-osaka-1-lt-tanaka
Grunt front-osaka-1-lt-tanaka
Grunt front-osaka-1-lt-tanaka
Grunt front-osaka-1-lt-tanaka
Grunt front-osaka-1-lt-tanaka
Grunt front-osaka-1-lt-tanaka
Grunt front-osaka-1-lt-tanaka
Grunt front-osaka-1-lt-tanaka
Grunt front-osaka-1-lt-tanaka
Grunt front-osaka-1-lt-tanaka
Grunt front-osaka-1-lt-tanaka
Grunt front-osaka-1-lt-tanaka
Grunt front-osaka-1-lt-tanaka
Grunt front-osaka-1-lt-tanaka
Grunt front-osaka-1-lt-tanaka
Grunt front-osaka-1-lt-tanaka
Grunt front-osaka-1-lt-tanaka
Grunt front-osaka-1-lt-tanaka
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Grunt front-osaka-1-lt-tanaka

1,988

Published on

Grunt Front Osaka vol1 の LT

Grunt Front Osaka vol1 の LT

Published in: Technology, Education
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,988
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
5
Comments
0
Likes
6
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×