Nodefrontはフロントエンド開発高速化のためのNode製コマンドラインユーティリティ。
http://karthikv.github.com/nodefront/
https://github.com/karthikv/nodefront
npm install でインストール。
$ npm -g install nodefront
アップグレードするにはアンインストールしてから再インストール。
$ npm -g uninstall nodefront $ npg -g install nodefront
依存モジュールを正しくインストール出来ないバグが報告されているので
npm updateは非推奨。
- Compile
nodefront compile
テンプレートエンジンjadeやコンパイル言語coffeescriptなどをコンパイルする。
- Serve
nodefront serve
ローカルサーバを立てる。ファイルに変更があれば自動でブラウザリロード。
- Fetch
nodefront fetch
css/jsライブラリをプロジェクトに自動でフェッチ。
- Insert
nodefront insert
css/jsライブラリをhtml/jadeに直接挿入。
- minify
nodefront minify
css/jsを圧縮。jpg/pngの圧縮にも対応。
$ nodefront compile [options]
デフォルトでは、カレントディレクトリの*.jade, *.styl, *stylus, *.coffeeを探し、html/css/jsに変換。
jade,stylus,coffeescript以外にも、nodefrontはconsoliate-build
を利用することで以下に対応。
- coffee-script
- dust
- eco
- ejs
- haml
- haml-coffee
- handlebars
- hogan
- jade
- jazz
- jqtpl
- JUST
- less
- liquor
- markdown
- mustache
- QEJS
- sass
- stylus
- swig
- underscore
- walrus
- whiskers
デフォルトのjade, stylus, coffeescript以外を使用する場合、そのライブラリをインストールする。
インストール済みのライブラリの拡張子のファイルは自動的にコンパイルされる。
markdownの場合、marked, discout, markdwon-js, markdownのいずれかが選択可能。
複数インストールした場合、上記に記述の順に優先される。
. |_ index.jade |_ styles.styl `_ script.coffee
このような構成で
nodefront compileをした場合、構成は以下のようになる。
. |_ index.jade |_ index.html |_ styles.styl |_ styles.css |_ script.coffee `_ script.js
- Help
compileに関するヘルプを表示。
nodefront compile -h/--help
- Recursive
サブディレクトリも含めてcompile。
nodefront compile -r/--recursive
- Watch
カレントディレクトリのcompile可能なすべてのファイルを監視し、監視対象ファイルに変更があればrecompileする。
依存関係を理解し、index.jadeがlayout.jadeをインクルードしている場合、layout.jadeに変更があれば、
layout.jadeのcompileとindex.jadeのcompileも行う。
nodefront -w/--watch
- output
コンパイルされたファイルの配置ディレクトリを指定できる。指定がなければカレントディレクトリになる。
nodefront compile -o/--output [directory]
jadeでmarkdownが利用したい場合、markedをインストールすれば利用できる。
$ npm install -g marked
コンパイルツール自身が持つオプションをnodefrontで使用したい場合、設定ファイル用意する。
プロジェクトの任意のディレクトリ上で.nfディレクトリを作り、comiple.jsonかcompile.ymlを作成する。
jsonの場合、
{
"compilerOptions": {
"jade": {
"pretty": true
}
}
}
ymlの場合、
compilerOptions:
jade:
pretty: true
$nodefront serve [options] [port] [hostname]
Nodeでローカルサーバを立ち上げる。
立ち上げたサーバはhttp://[hostname]:[port]/[path]のURLでアクセス可能になる。デフォルトはhttp://localhost:3000。
|_ index.html |_ css `_ styles.css |_ js `_ script.js
上記の構成のディレクトリでserveコマンドを実行すると、それぞれ以下のURLでアクセスできる。
- http://localhost:3000/index.html
- http://localhost:3000/css/styles
- http://localhost:3000/css/script.js
- Compile
nodefront serve -c/--compile
で
nodefront compile -w/--watch
を同時に行う。コンパイルするファイルの編集とそのブラウザ上での反映を即座に行える。
- Output
nodefront serve -o/--output [directory]
compileオプションとの併用のみ可能。特定のディレクトリにコンパイルしたファイルを配置したい場合に用いる。
- Live
nodefront serve -l/--live
対象のプロジェクトのHTMLとそのHTMLで読み込まれているCSS/JSファイルを監視し、ファイルに変更があれば自動的にリロードする。