クモのようにコツコツと

フロントエンドエンジニア イイダリョウの技術ブログ。略称「クモコツ」

AltJS

【メタ言語】フロントエンド開発スターターキットを作った(EJS、Sass(SCSS)、TypeScript)

メタ言語の続きです。前回はdelを使って破壊神になり、ファイルを削除しました。今回はこれまで作ってきたコードを元にフロントエンド開発スターターキットを作ります。メタ言語(EJS、Sass(SCSS)、TypeScript)のコンパイル&画像圧縮を行う環境です。それで…

【gulpfile.js】gulp.task()を関数化(←gulp4推奨)他、リファクタリング

メタ言語の続きです。前回はimageminを使ってメタ言語コンパイル環境で画像圧縮も実行しました。今回はgulpfile.jsの中のgulp.task()をgulp4で推奨されている関数の形に変更します。その他にもいくつかリファクタリングしました。それではいきましょう!

【TypeScript】gulpでwebpackを起動できるようにする(モジュールも再分割)

メタ言語の続きです。前回はwebpackでTypeScriptのモジュールをバンドルしました。今回はwebpackとgulpを連携して、gulpで他のタスクと一緒にwebpackのバンドルも実行します。さらにフォルダの変更やモジュール再分割も試みました。それではいきましょう!

【TypeScript】モジュールファイルをwebpackでバンドルする

メタ言語の続きです。前回はモジュール分割したTypeScriptをgulpでコンパイルしました。モジュールは分割したままでインポート設定がCommonJSになりブラウザ上ではエラーになりました。今回はモジュールを1つのファイルにバンドルすべく、webpackを使ってコ…

【TypeScript】モジュール分割で起きたエラーを調べる(CommonJSが原因)

メタ言語の続きです。前回はTypeScriptをモジュール分割しました。EJSやSass(SCSS)と違ってモジュール部分のソースは含まれず、またエラーも起きてうまく動きません。今回はエラーについて掘り下げてみました。*1。それではいきましょう! *1:結論から言うと…

【TypeScript】おみくじJSをTypeScriptに移植:型付け→モジュール分割(エラーあり)

メタ言語の続きです。前回はfsモジュールを使ってEJSファイルでJSONファイルのデータを読み込みました。今回からはTypeScriptのモジュール分割編に入ります。以前作った「おみくじJS」をTypeScriptに移植し、モジュールファイルに分割してみます。それではい…

【gulp】メタ言語(EJS、Sass(SCSS)、TypeScript)を同時コンパイルする!

gulpの続きです。前回はSass(SCSS)とTypeScriptを同時にコンパイルする環境を作りました。今回はここにEJSを加えてメタ言語(HTMLテンプレートエンジン、AltCSS、AltJS)フルセットの同時コンパイル環境にてみます。それではいきましょう!

【gulp】Sass(SCSS)とTypeScriptを同時にコンパイルする環境を作る

gulpの続きです。gulpでメタ言語を同時にコンパイルしたい。前回はその準備編としてSass(SCSS)を「src」フォルダから「dest」フォルダにコンパイルするファイル構成にしました。今回はここに他のメタ言語のコンパイル設定も加えていきます。まずはAltJSのTyp…

【JS】BabelでESをコンパイルする

JSコンパイル系の続きで今回はBabelです。前回はAltJSのTypeScriptをGulpでコンパイルしました。今回のBabelはESの新しい書式を従来の書式(ES5)に変換します。AltJSではなく正規なJSでちょっと書き方が新しいだけだし、Babel自体にコンパイル機能があるた…

【JS】TypeScriptをGulpでコンパイルしてみる

Gulpの続きです。前回はAltCSSのSass(SCSS)をコンパイルしました。今回はAltJSのTypeScriptをコンパイルします。それでは行きまっしょい!

フロントエンドのメタ言語のコンパイル環境を作る(言語選定編)

以前、CodePenで体験できるフロントエンド のメタ言語(HTMLテンプレートエンジン、AltCSS、AltJS)をやってみた。その後、CodePenでは体験できないEJSなどの存在も知り、そろそろローカル環境にメタ言語のコンパイル環境を作りくなった。言語によって方法が…

【メタ言語】HTMLテンプレートエンジン、AltCSS、AltJSの総まとめ(3記事)

あるとイイね!なフロント代替言語「HTMLテンプレートエンジン」「AltCSS」「AltJS」。少ない記述量のコードで済みます。ただし、残念ながらそのままではブラウザに表示されません。HTML、CSS、JSに変換(コンパイル)するための開発環境が必要です。そこで…

【CoffeeScript, LiveScript, TypeScript, Babel】AltJS 事始め

ブログ名をこっそり変えました。イイダリョウです。 「イイダリョウが書くブログ(仮)」→「クモのようにコツコツと」 Codepen Settingの旅、第3回です。 第1回は「HTMLテンプレートエンジン」、第2回は「AltCSS」でした。 今回はこれまたアルトいいねの「Al…