Migrating to Pug 2 – Pug
Pug 2 was released in August 2016. To make improvements in the new release possible, we had to make the decision of deprecating or removing some APIs and undocumented language features. We made an effort to make these changes as unintrusive as possible, and many of these changes were previously discouraged in console warnings. This article details how you can convert your application to Pug v2 fro
GulpによるPug、Sass、ブラウザーシンクなどを盛り込んだ開発環境「Speedy」を公開しました。 ｜https://wp.yat-net.com/name
2017年 08月 07日 GulpによるPug、Sass、ブラウザーシンクなどを盛り込んだ開発環境「Speedy」を公開しました。 カテゴリ： gulp タグ：gulppugSassScss Gulpのpugやscss、ブラウザーシンクなど、普段利用する開発環境をGitHubに掲載しています。 GitHub:speedy 何が出来るのか？ htmlを記述するのに pug を採用しています。 div.contents h1.contents_ttl 見出し p.contents_p 本文 <div class="contents"> <h1 class="contents_ttl">見出し</h1> <p class="contents_p">本文</p> 上記のように、pugだとタグを簡潔に書くことができ、閉じタグの必要がありません。ですので、コーディングで発生する閉じタグ忘れや、タグの
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)のよく使う9つの書き方 ｜ Tips Note by TAM
以前Pug(Jade)を使った制作環境を作る方法を紹介しました。 Pug(Jade)で効率的なマークアップ環境を作る 今回はPugでマークアップをしていくときに、よく使う書き方を紹介します。 ベースになるルールは9個あります。 タグ名はHTMLタグになる 改行をしてインデントをつければ入れ子になる インライン要素や改行にはパイプライン（|）を使う（ここだけ慣れが必要） HTMLはドット（.）で終わる要素の中に入れておけば解釈される 属性は丸括弧内に記述する クラス属性はドット（.）、ID属性はシャープ（#）で表す コメントにはHTMLとして出力されるものと、されないものがある イコール（=）を使えばエスケープできる インクルード（include [ファイル名へのパス]）で共通化したファイルを挿入できる Pugとはなにか？ Sassを使ってCSSを作成している人は多いと思いますが、PugはH
Pug(Jade)で効率的なマークアップ環境を作る ｜ Tips Note by TAM
HTMLのコーディングをするとき、メタ情報やヘッダーのような共通部分を効率的に管理するためにPugというテンプレートエンジンをよく使っています。最初は「導入コストが高い」と考えていましたが、それ以上のメリットがあると感じるようになりました。 今回はPugのテンプレートを作ったので、その使い方を紹介します。 今回はPugの記法については細かく説明できませんので、詳しい仕様は公式サイトを確認してください。 Getting Started – Pug テンプレートエンジンとPugについて テンプレートエンジンというのは、特定の処理をおこなうテンプレートに表示させたいデータ（文字列やタグなど）を渡すことで、無駄なくHTMLを作成していく仕組みのことです。CSSにおけるSassのようなものと考えてもいいと思います。 今回使用するテンプレートエンジンのPugには以下のような特徴があります。 閉じタグ（
Getting Started – Pug
Installation ¶ Pug is available via npm: $ npm install pug Overview ¶ The general rendering process of Pug is simple. pug.compile() will compile the Pug source code into a JavaScript function that takes a data object (called “locals”) as an argument. Call that resultant function with your data, and voilà!, it will return a string of HTML rendered with your data. The compiled function can be re-use
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML 2 Jade - a converter for HTML
Online Jade template editor
https://blog.mismithportfolio.com/web/20160326pugbegin
GitHub - manabuyasuda/gulp-pug-test
【Jade/Pug】gulpでJade / Pugをコンパイルする – Snaplog