Skip to content

Instantly share code, notes, and snippets.

@makotot
Created Nov 26, 2012
Embed
What would you like to do?
Nodefront

Nodefront

Nodefrontはフロントエンド開発高速化のためのNode製コマンドラインユーティリティ。

documentation

http://karthikv.github.com/nodefront/

github

https://github.com/karthikv/nodefront

install

npm install でインストール。

$ npm -g install nodefront

upgrade

アップグレードするにはアンインストールしてから再インストール。

$ npm -g uninstall nodefront
$ npg -g install nodefront

依存モジュールを正しくインストール出来ないバグが報告されているので

npm update
は非推奨。

screencast

http://vimeo.com/46197434

command summary

  • 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の圧縮にも対応。

compile

$ 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のいずれかが選択可能。

複数インストールした場合、上記に記述の順に優先される。

example
.
|_ index.jade
|_ styles.styl
`_ script.coffee

このような構成で

nodefront compile
をした場合、構成は以下のようになる。

.
|_ index.jade
|_ index.html
|_ styles.styl
|_ styles.css
|_ script.coffee
`_ script.js
options
  • 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]
markdown support

jadeでmarkdownが利用したい場合、markedをインストールすれば利用できる。

$ npm install -g marked
configuration files

コンパイルツール自身が持つオプションをnodefrontで使用したい場合、設定ファイル用意する。

プロジェクトの任意のディレクトリ上で.nfディレクトリを作り、comiple.jsonかcompile.ymlを作成する。

jsonの場合、

{
    "compilerOptions": {
        "jade": { 
            "pretty": true
        }
    }
}

ymlの場合、

compilerOptions:
    jade:
        pretty: true

serve

$nodefront serve [options] [port] [hostname]

Nodeでローカルサーバを立ち上げる。

立ち上げたサーバはhttp://[hostname]:[port]/[path]のURLでアクセス可能になる。デフォルトはhttp://localhost:3000。

|_ index.html
|_ css
  `_ styles.css
|_ js
  `_ script.js

上記の構成のディレクトリでserveコマンドを実行すると、それぞれ以下のURLでアクセスできる。

options
  • 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ファイルを監視し、ファイルに変更があれば自動的にリロードする。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment