かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

pug (jade)

Webpack .env から変数を取り込んで HTML に渡して使いたい。

API KEY が必要な script タグを HTML に書く必要があって API KEY を直接書いたファイルを git にコミットしたくないので、gitignore した .env に変数として持たせて HTML に渡す方法のメモ JavaScript で .env を使う loadenv を使うと .env ファイルをオ…

Webpack Babel + Pug + Stylus で ホットリロードできるSPA開発環境作った。

react-create-app とかボイラーテンプレートでサクッとできる時代だけど、自分で作ってみて学ぼうと思ったので、秘伝のタレ作ってた 構成 /build ... ビルドされたファイルが出力される /src |- /stylus | |- App.styl |- index.js |- index.pug package.js…

Pug 出力するコメントに変数を使いたい

pugでHTMLを生成する時、変数をコメントに含めて出力するのに少しハマったのでメモ 変数をコメントに含める方法 - var hello = "world"; | ↓ 又はpugの文字列展開の方法を使って - var hello = "world"; != `` ↓ NG集 - var hello = "world";

Gulp 実行コマンドに独自のオプションを付けて便利にしてみる例

前回minimistを使ってコマンドから実行するjsに変数を渡せるようにしました。 今回は、実際にコマンドのオプションで便利にgulpを使えるようにしてみた実例のメモです。 一つのgulp下に複数のhtmlサイトをディレクトリを区切って置いているイメージで、次の…

PugでPHPタグを出力したい

pugはHTMLテンプレートエンジンなのですが gulp などで拡張子をリネームしてしまえば PHPのテンプレートファイルにする事もできます。 ex: var gulp = require("gulp"), plumber = require("gulp-plumber"), rename = require('gulp-rename'), pug = require…

Pug 変数を返すMixinをつくりたい。

HTMLプリコンパイラのpugを使っていて、引数から計算をして値を返すMixinを作ろうとした所 mixin getCalendarRow(dayNum, start) return Math.ceil( (dayNum + start - 1) / 7 ); // 呼び出し側 div(class="row"+ +getMonthRow(30, 6)) 次のようなエラーに…

jadeがpugになって変わった所のメモ

HTMLのコーディングの際にjadeを愛用しています。 jadeがpugになってから、所々仕様が変わっていたのでメモ Mixinの呼び出し方が変わった mixin 関数名() ではなく+関数名()になった。 jade mixin foo('引数') ↓ pug +foo('引数') 文字列中の変数展開の方法…

Stylus プロパティの値に変数名を変数で指定したい。

タイトルからして超ニッチというか、意味がわからない感じですが、 例えばこんなHTMLがあったとします。 <ul class="myNav"> <li class="theme-1"><a class="btn">01</a></li> <li class="theme-2"><a class="btn">02</a></li> <li class="theme-3"><a class="btn">03</a></li> <li class="theme-4"><a class="btn">04</a></li> <li class="theme-5"><a class="btn">05</a>…</li></ul>

jade テンプレート内の配列を見やすくするために改行したい。

jadeテンプレート内で配列やオブジェクトを記述する時、値を見やすくしようとして改行すると書き方によってはエラーになってしまいます。 エラーになる書き方 // jade - var list = [ 'one', 'two', 'tree' ] - var obj = { a: 'one', b: 'two', c: 'tree', …

Gulp jadeコンパイル時に変数をGulpから渡したい

jadeでテンプレートを作成していて、開発時用と本番環境用とでCSSやjsの読み込みを変えたいというような事があります。 jadeでconfig.jadeの様なものを作成しておいて、devModeのようなフラグを基に出し分けることも出来るのですが、都度変数を変えてコンパ…

jade 属性の中にコーテーションを出力したい

最近はgulpでjadeをコンパイルしています。 <ul> <li ng-class="{active: thing.score < 50}"> <a href='[permlink slug="url"]'>LINK</a> <li> <ul> HTMLの属性などの中にWordPressのショートコードや、AngularJSのng-classとかを属性の中にコーテーションを使った値を入れたいケースなどがあります。 普通に書くとエスケープされる 属性の中の<や"がエ</ul></li></li></ul>…

jadeでIE振り分けのタグがまた変わってた...

以前 jadeでIEの振り分けタグを記述する方法を書いていましたが、 また記述方法が変更になっていたようです...以前書いていた はコンパイルエラーを起こすようになっています。//[if lt IE 9.0]>みたいな感じで記述しろとの事の様です。 ワンライナーで記述…

Jade 変数に入れたHTMLをHTMLとして出力する

jadeでhtmlタグを含んだ変数を出力したい時 # jade - var html = '犯人は<a href="https://twitter.com/intent/user?screen_name=KiKiKi_KiKi">俺</a>だよ!'; p= html div #{html}の様に書くと # HTML <p>犯人は&lt;a href=&quot;https://twitter.com/intent/user?screen_name=KiKiKi_KiKi&quot;&gt;俺&lt;/a&gt;だよ!</p> <div>犯人は&lt;a hr</div>…

jadeでIE振り分けのタグを書く方法

※ jadeをアップデートしたら記述方法がかわっていました。 この方法ではコンパイルエラーになる可能性があります。 jadeでIE振り分けのタグがまた変わってた... - かもメモ超めんどくさがりなので、最近はjadeでhtmlを生成しています。IEの振り分けタグ をj…