grunt front-osaka-1-lt-tanaka

WebStorm+Grunt+CoffeeScript+TypeScript

最近こんな感じでやってます

たなかひさてる @tanakahisateru

Pinoco developerPHPTAL contributorFirebug translation contributorYii framework user

はじめました

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

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' ] } } },

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' ] } } },

末尾はカンマだめ

このへんがウザい

ないわー 閉じカッコとかないわー 普通インデント使うわー

ケツカンマ禁止とかまじないわー JSONとか人間が書くもんちゃうでー

YAML使うわ―

CoffeeScriptの文法

• 文法的に末尾カンマ許可

• 改行が要素の区切りと解釈される

• インデントで構文が組める

• 改行を使うとオブジェクトの中括弧がなくてもOK

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' ]

あるとき

ないとき

スッキリ

ケツカンマフリー

,

] } } },

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

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

だけですごいのはいいんだけど

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

無反応orz

_.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() しか認識しないよ

JavaScript自由すぎ このIDE殺しめ

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

カッチカチですね

で、この文法でインターフェース定義だけ集める プロジェクトがありまして

https://github.com/borisyankov/DefinitelyTyped

*.d.ts

TSD

tsd query underscore —-action install —-save⏎

npm install tsd —-global⏎

*.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[];

(こんな感じでいっぱい書いてある)

こうなってこれが

こんなことも!

おーいみんな同じバージョンの typings 共有できるよー

tsd の —-save オプションで tsd.json ができてて、 これ使うと npm の packages.json みたいに…

grunt.loadNpmTask ‘grunt-tsd’

grunt tsd⏎

npm install grunt-tsd⏎

全自動ダウンロードやっほい♪

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

まだ *.js でがんばる理由• CoffeeScript も TypeScript もブラウザでそのまま実行できない。ビルドが必要

• 新しい言語の文法を知らない人でも開発できるように

• 「Sass使ってるのにCSS直で書き換えんな」事件

• どうせブラウザのデバッグコンソールじゃ JavaScript の構文で考えることになるし

オチ

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

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