Skip to content

Latest commit

 

History

History
90 lines (60 loc) · 3.52 KB

readme.md

File metadata and controls

90 lines (60 loc) · 3.52 KB
Raw

Speedy

Development environment for static pages using Gulp - Pug & Sass & browser-sync & babelify & browserify

SPEEDY = Static Pug Easy Early Develop YAT

依存アプリケーション等

設定ファイル

  • .editorcoding 文字コード設定

インストール

npmインストール

npm install

Usage

  • 開発を行うファイルはdevディレクトリの中に入れてください。
  • htmlの吐き出し元となる、pugファイルをpugフォルダの中にいれて開発してください。監視中、pugフォルダのファイルが更新されると、devフォルダに吐き出されます。
    • 例）dev/pug/index.pug → dev/index.html
  • index.pug、レイアウトテンプレート用の_layout.pug、共通テンプレート用の_head.pug、_header.pug、_foot.pug、スクリプト読み込み用の_script.pug を入れています。
  • コンパイル時にcss、jsファイルは結合されます。デフォルトで入っているものを利用すれば、コンパイル時の書き出しの設定をコメントにして入れています。
    • JavaScriptは必要となるモジュール用にファイルを作成し、main.jsでrequireしてください。コンパイル時bundle.jsとしてdev/js/の中に吐き出されます。
    • cssファイルは開発用にscssファイルがdev/styles/の中に入っています。吐き出し先はdev/css/common.cssとなり、同時にmapファイルが吐き出されます。
  • リセットにnormalize を使用しています。
  • 開発が終わったら、 npx gulp build コマンドを利用し、devフォルダに吐出さているファイルを元に、htdocsのフォルダに全ファイルが吐出されます。
    • 例）dev/index.html → htdocs/index.html
  • scss ディレクトリはFLOCSSを元に構成しています。お好みで構成を変えてください。FLOCSSについてはこちら
  • サイト情報はjsonで管理。ファイルはdev/pug/_data/site.json の内容を編集することで、meta情報等を一括で編集が可能です。
  • Gulpのlocals.relativePathにて各ページのルートパスを取得しています。

readmore link:yatのBlog

起動コマンド

gulp 4 への移行によりコマンドを npx 推奨としています。 npx gulp　- defaultで設定しているtaskが起動する

npx build　- htdocsへの吐き出し。ドキュメントルートへ設置用ファイル

npx gulp *** - *** のtaskを起動する

Author

YAT http://wp.yat-net.com

2.1.1

  • Node の対応バージョンを12.13.1にアップデート

2.0.1

  • JavaScriptファイルの監視バグ修正

2.0.0

  • Gulp 4 に対応

1.7

  • babel-coreを追加しました

1.6

  • 各種モジュールをアップデートしました

1.5

  • グローバルナビゲーションを追加 アクティブクラスが付くようになっています

1.4

  • モジュールのアップデート

1.3

  • normalize.css をpug側で読み込むように変更。normalizeのバージョンアップ

1.2

  • add path 追加。ルートパス情報取得

1.1

  • add favicon

1.0

  • First release