タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
Pug を HTML に移行して .vue ファイル の template タグ内に ESLint を効かせた話 - SMARTCAMP Engineer Blog
こんにちは！スマートキャンプでインサイドセールスに特化した SaaSを作っているエンジニアの中川です。 上記プロダクトのフロントエンドは Vue.js を用いて開発しているのですが、 その中で SFC 内のtemplateタグで使用していた Pug をやめて HTML に移行した件をこの記事ではお話しようと思います。 また、実際にtemplateタグに ESLint を効かせてみて発覚したエラーや警告のなかで数が多かったものや、これから Vue 3 に移行していく上で対応する必要があったルールを紹介します。 背景 eslint-plugin-vue が効かない チームに Pug 推進派がいない Pug を HTML に移行するには Vue 3 に準拠した Lint ルールを導入する Lint を実行してみる 対応した目ぼしいルール vue-require-v-for-key vue/val
1,100 超えコンポーネントの Jade / Pug テンプレートを移行した話 | PLAID engineer blog
1,100 超えコンポーネントの Jade / Pug テンプレートを移行した話 | PLAID engineer blog
Masashi MURANO🚀 on Twitter: "新型コロナは、武漢ウイルス研究所から誤って漏洩したものだという説。当初漏洩説は、トランプ政権が中国を悪者にするための陰謀論的な扱いを受けていたが、それがなぜバイデン政権になっても注目されているのか、詳細な調査報道（同僚が大勢出てく… https://t.co/OZyX3PUg5w"
新型コロナは、武漢ウイルス研究所から誤って漏洩したものだという説。当初漏洩説は、トランプ政権が中国を悪者にするための陰謀論的な扱いを受けていたが、それがなぜバイデン政権になっても注目されているのか、詳細な調査報道（同僚が大勢出てく… https://t.co/OZyX3PUg5w
「Pug(パグ)」って何？ HTMLと見比べながら7つのメリットを紹介！ 公開日 : 2021.11.01 最終更新日 : 2023.08.28 コーディング そもそも「Pug」とは？Pugとは「パグ」と読み、HTMLを効率的に書くための記述方法です。 「テンプレートエンジン」と言われるもののひとつです。 ※犬の種類ではないです。 HTMLの場合は拡張子が.htmlですが、Pugの場合は .pugとなります。 Pugを扱う注意点としては、PugファイルはWebブラウザが認識してくれないので、通常のHTMLに「変換」する必要があります。通常は、「コンパイル」といって、タスクランナー（gulpなど）やコンパイラーアプリ（Preprosなど）を用いて自動変換しますが、今回はPugのメリット紹介のため変換方法については割愛します。 Pugのメリット7つ今回は、PugとHTMLを見比べながら、Pug
Pugとは PugはHTMLを効率よくコーディングするためのテンプレートエンジンです。もともとはJadeという名前で呼ばれていました。 Pugのインストール Node.js をインストールしてください。次に、package.jsonがあるフォルダに移動して、下記のコマンドを実行してください。
![[Pug] HTMLを効率よくコーディングする - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/8c2c8c75414132cd3b8a03fd5b563d20586ce665/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZ0eHQ9JTVCUHVnJTVEJTIwSFRNTCVFMyU4MiU5MiVFNSU4QSVCOSVFNyU4RSU4NyVFMyU4MiU4OCVFMyU4MSU4RiVFMyU4MiVCMyVFMyU4MyVCQyVFMyU4MyU4NyVFMyU4MiVBMyVFMyU4MyVCMyVFMyU4MiVCMCVFMyU4MSU5OSVFMyU4MiU4QiZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1jbGlwPWVsbGlwc2lzJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9NDRhYmIzZWU2OGViODBhNDEzODZlNGVmZmM5MTVmNWQ%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQweXVuX2JvdyZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9YThlZWE4ODBlOWE5Nzc2ZDlmOTk3MGY0MDQ4YmFkNmY%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D1bf173e0112b3bb578043fc2d6f03389)
前回書いたこちらの記事では普通のWebサイトをNuxt.jsで作り変える流れをざっと書きました。 普通の受託系Web制作者による普通のWebサイトをNuxt.jsで作り変えてみた話 今回は上記の記事では割愛したNuxtでSassやpugなど、これまでgulpで使っていた便利なものを同じように使うためにはどうすれば良いか、ということを書いていこうと思います。 あくまで僕の環境（Mac）でこうしたら動くようになった、という記録なので正しいやり方ではないかもしれません。でも大事なのは成果物で、環境なんてのは自分が便利に使えれば良いの精神で書いていきます。 （沢山の人が関わるような大規模プロジェクトはちゃんとした環境構築しないとやばいとは思いますが） なぜSassとpugとjQuery（プラグイン群）を使いたいか？ まず自分にどんな前提知識があったかをざっと説明しておきます。 ・Sassやpugを
Pugの記法まとめ - Qiita
HTMLをPugで書くメリット 閉じタグを書かなくて良いので、書き忘れることが無くなる Classを「.」、IDを「#」と書くので、Class名やID名変更時の置換が楽になる ヘッダー、フッターなど共通部分を別ファイルで管理できる 変数や条件分岐ができる HTMLをPugで書くデメリット 変換する環境が必要 変換は、npm-scriptsやGulpを使いましょう。npm-scriptsの記事書きました。 GUIでの変換が良い方は、Preprosがオススメです。 Pug←→HTML変換サービス 環境を作らずにPugの書き方を練習できます。 HTMLをPugに変換 html2pug - convert your html code to pug https://html2pug.now.sh/ PugをHTMLに変換 PugHtml - Pug and HTML online converte
ヒップホップカルチャーそのものが“師”である。ラッパーISSUGI、Mr.PUGの語りから紐解く「守破離」 | J-WAVE NEWS
ヒップホップカルチャーそのものが“師”である。ラッパーISSUGI、Mr.PUGの語りから紐解く「守破離」 J-WAVEが共同プロデュースするオンラインマガジン「守破離 -SHUHARI-」。“守破離”とは剣道や茶道などの修業における段階を示したもの。「守」は、師や流派の教え、型、技を忠実に守り、確実に身につける段階。「破」は、他の師や流派の教えについても考え、良いものを取り入れ、心技を発展させる段階。「離」は、一つの流派から離れ、独自の新しいものを生み出し確立させる段階（※1）。 そんな“守破離”と“音”を切り口に人物のスタイルをリアルに掘り下げ、オリジナルインタビューをInstagramとJ-WAVE NEWSで配信していく。 （J-WAVE NEWS編集部） ヒップホップと「守破離」は通ずるものがある もうすぐ2024年に差し掛かる年の瀬。今から約18年ほど前、SEEDAとDJ IS
gulpでのコーディング環境の記事はけっこうな量を見つける事ができますが、webpackになるととたんに少なくなるのでニッチな所を狙ってPV稼ぎしたいと思います。 gulpも悪くないが、jsのコンパイルでwebpackを使うなら、最初からwebpackベースの方がいい タイトルのpugに限らず、gulpでコーディング環境を組んでいる人は多いと思います。 ejsやpugのテンプレートエンジン、sassやstylusのcssメタ言語は問題ないとして、jsを1ファイルで出力しようとするとどうしてもwebpackが必要になると思います。（他にもありますが、現在のデファクトスタンダードとして） 実際それでも問題ないと思いますが、ツールをあれこれ使うより1つにまとめたくなるのがコーダーって人種でしょう。gulpでできるほとんどの事はwebpackでできるので、webpackに乗り換えたくなるものです。
Pugのファイル設計について（LPなどの1ページ案件） Pugのファイル設計は、SCSSファイルの設計に比べて複雑ではありません。 実務を通して、色々と試してみましたが、ルールが統一されていれば、基本的には自分（チームや会社）が見やすいファイル設計で問題ないと思っています。 複雑なファイル設計にはならないので、第三者が見てもすぐにどのようなファイル設計になっているか理解できるはずです。 ただし、ルールが統一されているというのは重要なポイントです。 ルールが統一されていなければ、第三者が見たとき（引き継いだとき）に、どのようなファイル設計になっているのか判断ができません。 私の場合、LPなどの1ページ案件と、コーポレートサイトのような複数ページ案件で、ファイル設計のルールを分けています。 LPなどの1ページ案件に関しては、include（インクルード）ファイルを分けなくても問題ないと個人的に
Pug の文法について網羅的に説明された日本語のサイトが見つからなかったので、自分でまとめてみました。 英語でよければ公式にしっかりしたドキュメントがあります。 この記事はその内容の中でも特に文法に絞って、重要な順番で解説しています。 できるだけリファレンスを網羅している長い記事ですが、大事な順に書いているので、単に HTML を簡潔に書くためだけなら、最初の方の「HTML を簡潔に書くための基本文法」だけ読んでおけば大丈夫です。 Pug って何？ HTML を簡潔に書くことができるものです。HTML に変換されます。昔は Jade と呼ばれていましたが名前が変更されました。 単に HTML を簡潔に書けるだけでなく、テンプレートエンジン的な機能も持っています。 他のファイルを include する レイアウトを他のファイルに書いて extends して内容を埋め込む 変数を定義する ルー
静的サイトの作成に使用するHTMLのテンプレートエンジンをPugからEJS・Nunjucksを試してEJSにした｜noliaki
ここ最近、静的なWebサイトを制作する際にNuxtのgenerate機能を使用してNuxtを静的サイトジェネレーターとして使用しています。 しかし、Nuxtほどの機能が求められていなかったりする場合、独自に作った静的サイトジェネレーターを使用しています。 そこで使用していたHTMLのテンプレートエンジンとして「Jade」という名前のときから「Pug」を利用してきましたが、ここ最近ちょこちょこと辛く感じることもあり、EJS、Nunjucksを試して、最終的にEJSへ変更しました。 なぜPugから変更したのか？Pugは閉じタグが不要、入れ子はインデントで表現するという独特の記法で記述量が少なく、"タグの閉じ忘れ"が無いというメリットがあります。 しかし、 - 別のプロジェクトなどに流用しにくい - 入れ子が深くなってくると見にくくなってくる といった理由から、Pugがちょっと辛いなーと感じるよ
GulpでPugの環境を構築する方法です！ 同列に語られがちなHTMLのテンプレートエンジンであるEJSと近いかと思いきや、意外とDreamweaverのテンプレート機能と近いという感覚でした。 使えるようになれば、静的なHTMLサイトの構築が楽になるのは間違いないので、時間がある時にでも触ってみてください。
Webpack Babel + Pug + Stylus で ホットリロードできるSPA開発環境作った。 - かもメモ
react-create-app とかボイラーテンプレートでサクッとできる時代だけど、自分で作ってみて学ぼうと思ったので、秘伝のタレ作ってた 🍲 構成 /build ... ビルドされたファイルが出力される /src |- /stylus | |- App.styl |- index.js |- index.pug package.json 環境 @babel/core: 7.4.5 webpack: 4.34.0 webpack-dev-server: 3.7.1 # plugins html-webpack-plugin: 3.2.0 mini-css-extract-plugin: 0.7.0 clean-webpack-plugin: 3.0.0 つくったのよこせ！ はい。 TL;DR 秘伝のタレレシピ Babel install $ yarn add -D @babel/cor
PHPと仲良くなれるPugの書き方
こんにちは、仁木です。 先日、新規サイトのコーディングの担当割り振りをコーダーの河野さんと話している時に「ちょっとPug使ってみない？」という話になり、巷で話題のPugを使ってみました。 ただし、Pugは基本的にはHTMLコードのコンパイラであり、PHPを多用しているアウラではPugの環境をカスタマイズしてあげる必要がありました。 また、Pugは、Gulpなどのタスクランナーやwebpackのビルドツール、CLIなど、様々な環境で実行することが出来てしまうので、その辺りを吟味した過程なども含めて、環境の構築内容やカスタマイズ内容について今回は紹介したいと思います。 まず「Pug」とは…？ Pugをご存知ない方に説明をすると「Pug」はJavascriptで動くHTMLのコンパイラです。コンパイラとは、人間が書いたソースコードをコンピューターが理解できる言葉に翻訳してくれるプログラムです。
Viteで開発環境構築〜Pug・Sass・JS〜
npm createはnpm initのエイリアスでpackage.json を作成します。 vite@latestは「最新バージョン(2023年2月7日時点で4.1)のViteをインストールする」という意味です。 コマンドを実行して、質問に答えながらプロジェクトを作成していきます。 続行の意思確認 npm create vite@latestを実行すると、「create-vite@latestをインストールしてください、このまま続けますか？」と訊かれるので、キーボードのyを入力してEnterを押してください↓
storybook for htmlがあまりにも使いづらいのでpugを使って上手く利用する方法を考えてみた - Qiita
storybook for htmlを利用する場合ってvueとか使わないと思うのですが、実制作で素のHTMLで書くケースなんてほぼ無いですよね。pugで書かれる事が多いかと思います。 そんな中でstorybookを利用したい場合【コード補完の利かない環境でHTMLを書く】か【ビルドしてコピペ】、しかも書いたところでpugとして再利用できる内容ではないのです。 下手したら仕事が増えるだけでハッキリ言って使えません。検索にも殆ど引っかからない状態です。 かと言ってstorybookを使うためにnuxtを利用するってのも違うと思うので、上手く使う方法を考えてみました。 20/02/26 環境作ってみました。gitも置いてあるのでこちらの方を参考にしてください。 静的なWEBサイト用にも使えるstorybookのpug環境を作ってみた 前準備 今回説明する内容はpugの利用方法を説明するだけなので
ページを量産したりチームでサイトを作る時pugという言語を使ってWebサイトを作っています。pug（旧：Jade）の特徴やメリット、基本的な使い方、導入方法（pug-cliとgulp）についてまとめました。とくに記述方法はif（分岐）やfor・each（ループ処理）など解説。テンプレート化したい場合に使う記述方法の解説と具体的なテンプレートの作り方なども紹介しています。 普段webpackやgulpを使っている方なら導入のハードルも低いと思います。 今回はmpmコマンド出始めたい方はpackage.jsonで手軽にすぐ始められます！とても記事は長いので目次を利用して好きなところを読んでください。 かみーゆ/フロントエンドエンジニア 資金ゼロからフィリピンで起業した海外ノマドエンジニア。IT業界10年以上でテクニカルディレクター（技術責任者）・エンジニア講師・ブリッジSEを経てLenzTec
Viteで純粋なPugを使う
ViteでPugを使おうとすると少し厄介だったので、環境構築の手順をまとめました。 「vite pug」等で検索するとVueやReact、HTMLを噛ませる方法はヒットするのですが、Pugを単体で使う方法はなかなかヒットしません。 Viteで純粋なPugを使えるようにするというのが本記事の趣旨になります。
始めに 今までgulpでコーディングの環境を作って、JSだけwebpackするというものを使っていましたが、それを何とかwebpack側に全部移行できないかなと思っていました。ただpugをビルドする方法がなかなかいいのが見つからなくて結構苦労しましたが、ある程度形になったのでそれを記事にまとめたいと思います。 動作確認用のリポジトリはこちらになっているので参考にしてください。色々余計なコードは入っていますが・・・。 コーディング環境リポジトリ pugのビルド ReactやVue.jsの開発でお世話になっているHTMLWebpackPluginは動的のファイル追加に対応できないので今回は使用しません。 今回はpug-html-loaderというものを使います。以下のような感じでローダーを呼んでいくとpugでビルドしてHTMLを出力してくれます。 module.exports = { // 他
Pug+Stylusでお手軽にCSSお絵かきを始めよう！〜CSSお絵かき環境構築と便利なプロパティ紹介〜 - 虎の穴開発室ブログ
こんにちは、とらラボのY.I.です。12月も中旬に差し掛かり寒い毎日が続きますが、みなさんいかがお過ごしでしょうか。 さて今回は、虎の穴ラボ Advent Calendar 2020 - Qiita 15日目の記事として、私Y.I.が、CSSを使ってイラストを描いていく上でのオススメの環境と、オススメのCSSプロパティを紹介したいと思います。 また虎の穴ラボ Advent Calendar 2020 - Qiitaでは14日目にY.Nさんが「Docker + GradleでKotlin WEBアプリの開発環境＋本番環境の構築をやってみよう」を、 16日目はH.Hさんが「Chromeの拡張機能でショートカットを作る二つの方法」を書かれています。どちらも非常に興味深い記事ですので、本記事と合わせて是非ご覧ください。 それでは本編スタートです！ See the Pen neko by YUSUK
The Pug in the Rug
You have been honoring the pug for 0 seconds You are a Assistant of pug
0.前提 webpack4 pug-html-loader 1.package.jsonのscriptsで環境変数を設定 npmでcross-envをインストールし、Mac/Winどちらでも動くようにする。 "scripts": { "build:prd": "cross-env NODE_ENV=production webpack --mode production", "build:stg": "cross-env NODE_ENV=staging webpack", "build:dev": "cross-env NODE_ENV=develop webpack" }, 2. pugのテンプレート内で環境変数取得 pugを置換するときnodeのライブラリが使えるので、nodeのprocessをつかって環境変数を取得。 定義したファイルは他のテンプレートで読みこむようにする。
テンプレートエンジンPug入門 | 第1回 Pugの特徴
Pugとは Pug（パグ）*はHTMLを簡単に記述するためのテンプレートエンジンです。PugではHTMLの階層構造をインデントで表現するという特徴があり、Hamlというテンプレートエンジンの影響を受けています。CSSプリプロセッサであるSassのSass記法もまた、Hamlが元になっています。インデントで表す記法になじみがある方もいるのではないでしょうか。 *注：名前の変遷 ちなみに、PugはもともとJade（ジェイド）と呼ばれていました。Jadeという名前が商標登録されていることがわかったため、議論の結果、プロジェクト名はPugになり、npmのパッケージ名はpugとなりました。 テンプレートエンジンを使うメリット 筆者は、何かしらのテンプレートエンジンを使ってHTMLを作成することがほとんどです。テンプレートエンジンには、PugやMustache、HandlebarsやEJSなどたくさん
Hi friends,is Pug-HTML helping you?I need your HELP!!! I am surprised that last year I received only $3 from a good man to support. It is not enough, and I need you help to pay domain, hosting, and maintain fees of this service.
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「Pug(パグ)」って何？ HTMLと見比べながら7つのメリットを紹介！ | AndHA Blog
[Pug] HTMLを効率よくコーディングする - Qiita
Nuxt.jsでSassとpugを使えるようにする方法（ついでにjqueryも） | ARAKAZE NOTE
【脱gulp】webpackでpugを使う。jsonで一括ビルドも。 | 上間ウェブ店
Pugのファイル設計（LPなどの1ページ案件） | 吉本式 Web制作のコーディングガイドライン
Pugの文法まとめ
GulpでPugの環境を構築！静的HTMLサイトを効率的に作ろう | HPcode（えいちぴーこーど）
pug（旧：Jade）を使い倒して時短マークアップしよう！
webpackだけでpugをビルドする環境を作る - Qiita
webpack + Pug ：テンプレート内で環境変数を取得 - Qiita
PugHtml - Pug and HTML online converter in realtime
syounagon.hatenablog.com
lee.hpplus.jp
togetter.com
togetter.com
note.com/maru0115
3newskininaru.com