Nunjucks + gulp で静的 HTML をモジュール化する
やりたいこと 概要 静的 HTML を複数ページ作成するときに、共通部分（ヘッダーとかフッターとか）をコピペしたくない。 「PHP とか使って include とかすればいいじゃん」 ていう意見もあるんだけど、動作確認に web サーバー立てるの面倒だし、単なる HTML で済むなら HTMLで 完結させたい。 細かい背景 gulp-ect を使って、やりたいことは大体実現出来ていたんだけど、以下の2つの理由により、別の方法に切り替えたいと思った。 ECT も gulp-ect も最終更新日が3年前 ファイルのパスを埋め込む（後述）、というののやり方が分からなかったし出来なさそう やったこと（TL;DR） さきに結論だけ書いておくと、 Nunjucks というテンプレートエンジンの記法で、ファイルを作成 gulp-nunjucks-render という gulp のプラグインを使って、HT
Gulp + EJS + JSONを使用してhtmlファイルを量産する方法 | ブログ | Glatch（グラッチ） - 夫婦で活動するフリーランスWeb制作ユニット
似たようなhtmlを複数ページ制作するような案件があると思いますが、地道に複製して制作するのは非効率で管理も面倒でミスもしやすいです。 そこで今回はGulpとEJSというテンプレートエンジンを使用してJSONファイルに設定した値を読み込み、複数のhtmlファイルを量産する方法を備忘録を兼ねてご紹介します。 今回使用するもの 今回はGulpを使用してEJSを動かします。Gulpの導入方法などは検索するとたくさん記事が出てきますので、そちらをご確認下さい。 テンプレートエンジンであるEJSと、生成したファイルごとに名前を付与するリネーム用のプラグインを導入します。 gulp-ejs gulp-rename pages.json template.ejs gulp.js 各ファイルの設定 pages.json ユニークな値を格納するJSONファイルは下記の通りです。 { "pages": [ {
【gulp】htmlテンプレート「gulp-jade」についてメモメモ（１）～導入 | バシャログ。
みなさま、こんにちは。昨年は、『ちはやふる』や『めぞん一刻』、そして『孤独のグルメ』などにハマり続け、夫婦で聖地めぐりをしていた kouraku です。とりあえず、『ちはやふる』の聖地巡り（分倍河原：東京、近江神宮：滋賀、芦原温泉：福井）はコンプリートしました。 さて、昨年はhtmlテンプレートとして「gulp-html-extend」を紹介してきましたが、簡単で分かりやすい反面、かゆいところに全く手が届かない場面などに多々遭遇します。 「あぁ、ここで条件文が使えれば余計なレイアウトなんて作らなくて良いのに・・・」 とか、 「変数が多くなると見辛いし設定しづらいな・・・」 とか。 こうした悩みを解決すべく、ここ最近（自分が）あまり使わなくなってしまった「jade」をおさらいしようと思いました。ということで、そのおさらい内容をメモメモ。 まずは構成から・・・ 今回の構成は、下図のとおりです。
Gulp.js入門 - コーディングを10倍速くする環境を作る方法まとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
普通に使う分には全く困らないほどの数のプラグインがGulpにはあります。 Githubでのstar数からも明らかなように、GoogleのWenStarterKitでもGulpが採用されるなど、注目度はますます高くなっています。 Gruntとの比較 Gruntと比較してのメリット・デメリットは以下のようになります。 メリット Gruntより設定ファイルが記述しやすい StreamAPIを利用することでファイルを毎回書き出すGruntより高速でエコ デメリット 記述がよりNodeに近くなるため、複雑なことは敷居がやや高め プラグイン開発のためのドキュメントが少ない 今日のゴール Gulp.jsを使ってコーディング作業を10倍速くする！ そんな環境を作りたいと思います。 1. Node.jsをインストール まずはNode.jsをインストールしましょう。 Node.js http://nodejs
タスクランナーgulp入門
タスクランナーgulp入門 gulpはGruntと同じように様々なタスクを自動化してくれるツール(タスクランナー)です。 node.jsで開発されており、Sass/CompassやLess、StylusなどのCSSプリプロセッサーのコンパイルやCSS/JSの結合圧縮、JSHintによるバリデーションなど様々なタスクを自動で行ってくれます。 Gruntとできることはほとんど同じですが、Gruntよりタスクの流れがわかりやすく、JavaScript(node.js)で独自のタスクも簡単に記述することができます。 後発ということもありGruntよりプラグイン数は少ないですが、マニアックなタスク以外はそろっているので通常のWeb制作などでは問題なく利用できるでしょう。 node.jsのインストール node.jsが必要ですのでインストールしていない方はインストールしましょう。 公式サイトでインスト
タスクランナーgulp.js最速入門 - id:anatooのブログ
相変わらず仕事ではデザインやりつつJavaScript書いている。 タスクランナーとしてGrunt.jsを使っていたけれども、使ううちに段々不満がでてきた。遅かったり、記述が冗長になりがちでつらかったので最近になってgulpに乗り換えた。 gulpは良い。タスクは自動的に並列に実行され、かつストリームで処理されるので速いし、タスクの記述もストリームベースの書き方のおかげでGrunt.jsに比べるとだいぶ短くなる。 ただ、そこらにあるgulpをちょっと試しただけの日本語の記事やドキュメントをみてても実際のプロジェクトで使えるレベルまでの知識を得られず学習に一日かかった。 この記事では、gulpをまともに使えるようになるまでに必要な知識を書く。 導入とHelloWorld まずは導入。npmからgulpをインストールする。 $ npm install gulp -g $ gulp -v [gu
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
gulp: The Good Parts
https://blogcroc.com/