はじめに
- タスクランナーをインストールしたりするの使うのがだるくなってしまったので、自分サイト用にGUI付きのタスクランナーアプリPreprosを使う。
- https://prepros.io/
- エディタではなく、シンプルなタスクランナーという感じで、pug/sass/typescriptなどをコンパイルして書き出したり、ライブプレビューしてくれたりする。
書き出し先
project settingのHTML Tools, Css Tools, JS Toolsから書き出すフォルダなどを設定する
画像
filesタブから画像を選択すると出力先を指定できるようになる。
jqueryとかライブラリ、追加
Packagesタブというところから追加できた。 （使い方あってるのか？）
sass,scssの書き方
sassはタブで階層を作る。scssはcssと同じかっこのやつ。自分は前者を利用。
SassとSASSとSCSSの違いについて | UX MILK
TypeScriptの書き方
- importとexportで、読み込んだり、読み込ませたりする。
- this忘れがち
- ：のあとに型をかける
- TypeScript入門 - とほほのWWW入門
- JavaScriptで書く「let,var,const」の違い・使い分け | TechAcademyマガジン
main
// 名前を指定してimport
import { MyClass } from "./hoge/MyClass";
import $ from 'jquery';
var kita = new MyClass('Kita', 70);
console.log(kita.name);
$(function(){
console.log('jQuery is ready.');
kita.Say();
});
class
import $ from 'jquery';
class MyClass {
name: string;
age: number;
constructor(name: string, age: number) {
this.name = name;
this.age = age;
}
Say() {
console.log("say");
$("#fuga").text("fugafugafuga");
}
}
export {MyClass};
