Category: Programming

GulpでTaskに引数を使う

d、e、v オプションに分かれている
Gulpで、タスクをより便利にしたいとき、引数が使いたくなります。こんな感じです。 1$ gulp build --dev これは、npmのモジュール、「minimist」を使うとできます。 1$ npm i minimist js 側の実装は次の通りです。 123456789var minimist = require("minimist");gulp.task("build", function() { var env = minimist(process.argv.slice(2)); if (env.dev) { // --devが入っているとき  … Read More

TypeScriptで、関数を型にする

Typescriptの型として、 「number」「string」「boolean」などとありますが、 実は、関数も型にできます! 1var function1:(arg1:number, arg2:string)=>boolean; こんな感じ。 1(引数名:型, 引数名:型 .....)=>戻り値 戻り値がないときは、voidを指定できます。 どんなときにつかうの?コールバック引数を使いたい1234567function progressA(callback: (msg:string)=>void) { callback("hoge");}progr … Read More

Javascriptでアニメーションを簡単に使える「move.js」を使ってみる

簡単な記法で、アニメーションをすることができます。 中では、transition-delayとかを使っているようです。 インストール1$ bower i move.js ※ i と書くと、installを略すことができます。 head タグ内で読み込むと怒られる!中でonload時にdocument.bodyを呼び出しているので、head タグ内で scriptタグで読み込むとエラーが出てしまいます。 解決策は2つあります。 webpack などを使用して bundle し、それを body タグで読み込む body タグ内で読み込む js から動的に読み込む おすすめは webpack … Read More

Gulpでtsify+watchify

Qiitaにもかきました。 TypeScriptでBrowserifyが使える、 tsifyを知ったのですが、 ビルドの時間が遅いし、毎回「gulp XXX」って打つのが大変なので、 watchifyと一緒に使えないかな・・・と思いました。 次のようなgulpfile.jsを作りました。 gulp watchify-tsifyと実行する。 ./ts/a.ts、./ts/b.tsを監視する。 watchifyでupdateが発生するたびに、runBundle()を呼び出す。 b.pluginでtsifyを読み込み、js/all.jsを出力する。 参考 … Read More