Development environment for static pages using Gulp - Pug & Sass & browser-sync & babelify & browserify
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dev
.editorconfig
.gitignore
gulpfile.js
package.json
readme.md

readme.md

Speedy

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

SPEEDY = Static Pug Easy Early Develop YAT

依存アプリケーション等

Node version v6.11.3 or more

設定ファイル

  • .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.jsrequireしてください。コンパイル時bundle.jsとしてdev/js/の中に吐き出されます。
    • cssファイルは開発用にscssファイルがdev/styles/の中に入っています。吐き出し先はdev/css/common.cssとなり、同時にmapファイルが吐き出されます。
  • リセットにnormalize を使用しています。
  • 開発が終わったら、 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 - defaultで設定しているtaskが起動する

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

Author

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

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