jsonファイルを利用してデータとテンプレートを分ける – npm + nunjucks + stylus で静的サイト制作を効率的にする(6)
テンプレートエンジンnunjucksの利用環境構築を紹介してきましたがテンプレートエンジンの何が便利かというと次のようなことです。 ヘッダーやフッターなどのページに共通な部分を一か所にまとめることができる リストのような...
テンプレートエンジンnunjucksの利用環境構築を紹介してきましたがテンプレートエンジンの何が便利かというと次のようなことです。 ヘッダーやフッターなどのページに共通な部分を一か所にまとめることができる リストのような...
sassではよくメディアクエリを設定しやすくするためmixinを使用しますがstylusでも同様にメディアクエリ用のmixinを作成すると効率が各段によくなります。今回はメディアクエリ用のmixinをstylusでどう作...
webpackを使用してjsファイルを集束(バンドル)することができましたがJavascriptは様々な規格があるので環境によって動かない場合があります。 そうならない為にひと手間加えてより確実に用意したjsコードが実行...
CSSに用意されているレイアウト用プロパティdisplay:flexですがいままで未対応だったIE11のサポート終了にともないもっと気軽に使用することができるようになりました。 しかし、設定の仕方で意図しない見た目になる...
前回までで次のようなことをやってきました。 nunjucks でhtml生成 stylus でcss生成 imagemin で画像圧縮 javascriptはそのままコピーして使用する想定でしたが使用量が増えてしまった時...
npm + Nunjucks + stylusを使用してフォルダの変更を監視してhtml,css,jsを再生成、browserSyncを利用してブラウザを自動リロードして確認しやすいようにしました。 ただ画像ファイルの処...
npm + Nunjucks + stylusで構成される開発環境作成手順の続きです。 前回、buildコマンドでhtml,css,jsファイルをdistフォルダに吐き出す所まで行きました。 今回はファイル更新を感知して...
静的サイト制作時におすすめのタスク自動化ツール構成 npm+Nunjucks+Stylus を紹介します。 各ツールの簡単な紹介 [npm]Node.jsのパッケージマネージャー。Node.jsをインストールすると自動的...
完全に備忘録です。 前提条件 jqueryをheadタグ内で読み込んでいる ES2015(ただlet使用しているだけ…)を使用しても問題ない状況である メモ aタグにさらにクラスを加えても良し jQuery非依存のコード...
テンプレートエンジンnunjucksでテンプレートファイルにjavascript関数を使用することはできません。 例えば次のようなコードはコンパイラエラーになります。 nunjucks使用の際はテンプレート内で関数を使う...