Gulpでpugのコンパイルを100倍早くするちょっとしたテク | 丸ノ内テックブログ
フロントエンド front end バックエンド back end アプリ開発 app インフラ infra その他 other データドリブン data driven タグ一覧 Ajax（1） Android（20） Apache（2） AR（2） benchmark（1） BigQuery（2） browsersync（1） C4（1） CakePHP（1） CentOS7（1） CI（1） CMS（3） CoreNFC（1） CraftAR（1） CSS（1） DeepLab（2） Dmitry Stogov（1） ECMAScript（1） ECMAScript6（1） ElePHPant（1） Facebook（3） FFmpeg（1） firebase（1） fluentd（1） Framework（1） GD（2） gif（2） Git（1） GLSL（5） Google A
gulp-jade で JSON ファイルを変数に読み込む方法（gulp-pug v2 対応追記） - Qiita
//- パースしたJSONデータを格納するグローバル変数 - var data = {} //- JSON 構文をパースしてグローバル変数の data にデータを格納する mixin mixin json(name) - var oldbuf = buf - buf = [] block - data[name] = JSON.parse(buf.join('')) - buf = oldbuf //- 外部 JSON 情報の読み込み +json('site') include site.json //- 呼び出し h1: a(href=data.site.root) #{data.site.name} 解説 jade 標準出力を横取りして JSON をパースしてます。 最後に読み込んだ JSON が標準出力されないよう、バックアップしていた buf を書き戻してます。 buf は jad
Jadeを使用した静的HTMLコーディング実践 - Qiita
手順 コマンドライン（Terminalなど）でダウンロードした解凍ファイルのROOTディレクトリに移動 npm install grunt deployでHTML書き出し、grunt watch:deployでjadeの変更を監視し、HTML自動書き出し可能 JSON読み込み 全ページの メタ要素、シェアテキスト サイト共通のリンク などをsrc/json/_common.jsonで一括管理しています。 手順 Gruntfile.js12〜44行目で、jade→HTML書き出しの設定をしています。 dataプロパティにオブジェクトデータを渡すとjade内で使えるようになります。 3.jadeDataFunc関数ではsrc/json/_common.jsonデータに加えてenv(環境)、page(HTMLファイル名)をマージしてからオブジェクトデータを渡しています 4. src/jade/c
Pug(Jade)でgulpを使って複数のjsonファイルをいい感じに読み込みたい - Retired Colourman
目的 Pug(Jade)にJSONオブジェクトを渡して楽したいことがあると思う。 { "title":"最高のWebページ", "description":"最高のWebページです", "author":"最高の作者" } html(lang="ja") head title=title meta(name='description',content=description) meta(name='author',content=author) pugファイル内でオブジェクトを変数宣言しようとしても複数行に渡る変数宣言はエラーになってしまうので、オブジェクトを書きづらいという問題がある。 なので「jsonでオブジェクトを書いてそれをどうにかしてpug内でincludeしてよしなにやりたい」となるんだけど、jsonファイルをpugの中でincludeして使うことはできないので、それをどうやる
gulp-data ＋ json で title, description, keyword を一括管理する - Qiita
gulp-data ＋ json で title, description, keyword を一括管理するgulp ディレクトリ構造は以下の前提での設定。 gulpfile.js package.json /dist /src └ /_jade └ /_data └ setting.json └ /aaa └ index.html └ /bbb └ index.html var data = require('gulp-data'); var DEST = './dist'; var SRC = './src'; var SRC_HTML = ['./src/**/*.jade', '!./src/**/_jade/*.jade', '!./src/**/_*.jade']; gulp.task('jade', function() { return gulp.src(SRC_HTML)
Atomでコーディング中にPug（旧Jade）でEmmetが発動しないのをどうにかする - Qiita
タイトルそのままなのですが、Jade→Pugに環境を切替えた時に、Emmetが発動しなくて非常にストレスが溜まっていました。（最初にJadeで作成し、Pugに拡張子を変更する。やってられないのでJadeにするなど。） まあ対応するまで待てばいいか〜っていう気持ちだったのですが、なんかいつまで待っても対応してくれそうにないのでググって解決方法を探したらありました。 解決法 file-typesというプラグインを導入し、.pugを.jadeとして認識させてあげます。 Atom→個人設定（config.cson）に、
Jadeの記法について（あまりまとまっていない） - Qiita
node.js ver.0.10.24 npm ver.1.3.21 Jade ver 1.1.4 タグの記述と構造化 タグ名を書いて、インデントで構造を表す。
コーダーがおさえておきたいコーディングのツール8選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 昨今ではWebのフロント周りを取り巻く環境が激変しています。 Webサイト・アプリケーションが進化するに連れて構築も難しくなってきましたし、技術やツールもいろんなものが登場しました。 そこで今回は、フロントエンドエンジニアはもちろん、コーディングに携わる人なら誰でもおさえておきたい、今旬な技術やツールを紹介したいと思います。 コーディングに関わる人ならおさえておきたい必須のフロント技術＆ツール8選 1. タスクランナー フロントコーディングに関わるあらゆるタスクを自動化してくれる頼もしいツールです。Grunt,Gulpといったツールがコレにあたります。 JadeやSass,CoffeeScriptのコンパイル、画像圧縮、バリデーションチェック、webfontのアイコン化、スプライト画像生成、スタイル
React.jsをCoffeeScriptとjadeで書く - Future [ _ ]
React.jsをCoffeeScriptとjadeで書く February 13, 2015 はじめに React v0.13.0 Beta 1 | React React.Componentを使うと生のJSのclass形式でReact Componentを定義できる reactjs - react-jadeでjadeテンプレートから仮想DOMを出力する - Qiita JSXのXの部分をjadeで書けるようにするライブラリ (Jade -> React VDOM) ここあたりの記事を読んでRiot.jsなら素でできるCoffeeScriptとJadeの組み合わせがReactでも出来そうだと気づいたので試行錯誤中、 よさ気な書き方を見つけた話です。 結論 こうです。 https://gist.github.com/uzimith/145a0cf8e342dc46ac96 React =
マークアッパー的 Jade 入門 21 の手引き | e2esound.com業務日誌
元ネタ: マークアッパー的 Haml入門21の手引き Slim 版書いた: マークアッパー的 Slim 入門21の手引き | e2esound.com業務日誌 Jade は, JavaScript 製のテンプレートエンジンで HTML を効率的に生成するための記法です。Haml の影響を受けています。関係としては, Haml > Jade > Slim といったように影響を受けているため, それぞれ似通った機能を持っています。 Haml と Slim の同様の記事があるのでどうせなら Jade もあれば比較できるのかな? ということで書いてみます。 Jade は実務で使用したことがないので誤りがある可能性があります。一通りドキュメントは確認していますが誤りがあればご指摘いただけるとありがたい。 ※ ターミナルでコマンド実行を記述する場合$ command のように頭に $ をつけて記述して
Jadeで、jQueryの読み込みを丁寧かつ簡潔に書く - Qiita
jQueryをできる限りCDNから読み込みたい 可能であればファイルサイズを節約したい などの要件を満たしたjQueryの読み込み方を、Jadeで記述する方法を紹介します。 jQueryの読み込みの際に使う2つの手法 CDNから読み込む際のフォールバック HTML5 Boilerplateなどで採用されている、CDNから適切に読み込むことができなかった場合に備えてのフォールバック処理を用意するテクニックを使用します（参考: HTML5 Boilerplate and jQuery - Stack Overflow）。 具体的には、下記のようにHTMLを記述します。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <script> window.jQuery ||
グローバルナビのカレント処理を静的にexpress + jadeでやってみた - console.trace();
express使ってみよー！という思いつきからやってみた。 導入 まずはデモを作るのにherokuにNode.js乗せましょうということで、 こちらの記事を参考にさせて頂きました。 Node.js + Express を Heroku で動かすまでの手順まとめ 上記を読めばラクラクインストール！なんて上手くいくわけなかった。 色々調べてみるとWin環境だと皆さん同じ所ではまっているみたいで、 何度か心が折れかけましたがエラーメッセージ追っかけていってうまくいった。 ではさっそくexpressをいじり倒す。 ぱぱっとできたのがこちら。ついでにTwitterBootstrapも入れてみた。 ソース https://github.com/yotanote/express_test デモ http://test-express.herokuapp.com/ 解説 routes/index.js /
フロントエンドなプリプロセッサ・テンプレートエンジンまとめ | Pen
はじめに 最近は業務においても生のhtmlやcssを書く機会が少なくなりました。また、JavaScriptもいわゆるaltjs系といわれるものが次々に開発されています。 また、以前はサーバ・サイドのフレームワークのテンプレート・エンジンとして使用されることがほとんどだったものも、今ではスタティックなサイトやアプリケーションを生成するジェネレータに多く取り入れられていたりします。 このエントリーは、そのようなテンプレート・エンジンや、プリプロセッサ、alternate javascriptを大胆にもいっしょくたにまとめた、自分向けのメモです。 がっつり試したものもあれば、やんわりと触っただけのものもありますが、リストアップしてみたいと思います。 テンプレート・エンジン / マークアップ言語 jade Node Template Engine jadeは、Hamlに影響を受けてつくられたテンプ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://locus-dw.com/blog/2015/01/02/jade_template.html
Jade Template Syntax Documentation by Example
Phuse
jadeの:markdownフィルターとcoffeeフィルター + 外部ファイル読み込み
A Node in Nodes
Jade について。