Expressの最小構成(ES2015 + Browserify + Watchify + Stylus + Jade) - Qiita
Expressで簡単なプロダクトを作る時のオレオレ最小構成です。 要件 サーバーサイドもクライアントサイドもES2015(ES6)で書く サーバーサイドはNode.jsがv4以上だとES2015で書けるはず importなどが使えないと知ったので、babel-nodeを使います クライアントサイドJSはBrowserify + Babelifyでコンパイルする 開発時はWatchifyする ビルド時はUglifyする CSSはStylusで書く StylusはExpressのMiddlewareで都度コンパイルする ライブラリはkouto-swissを使う ベンダープレフィックスはautoprefixerでつける ViewはJadeで書く サーバーからJadeに変数を渡したりする Gulpなどのタスクランナーは使わない $ npm run xxxでやる 画像のSprite化とかするならGu
Gulpとか使ったサイト作るときに便利なやつ作った
ryonakae/gulp-jade-stylus-es6-boilerplate Gulpとか使ってサイトを作ったりすると思うけど、そのスターターキットというかボイラープレートというか、そういう便利なやつ作った。主に自分用。 できることJadeのコンパイルStylusのコンパイルJavaScriptのコンパイル(ES6対応)画像のminifySprite画像生成ローカルサーバ起動、ファイル監視してブラウザ自動更新本番用ビルド時だけもろもろminifyするHTMLはJadeでCSSはStylus。最近この組み合わせをよく使う。JSはES6がスタンダードになりつつあるし、今のうちから書き方覚えとこう、ということで。 JSはBrowserify+Babelifyを使ってコンパイル。開発時はWatchifyを使い差分だけコンパイルするので速い。ライブラリの管理はBower。 Stylus、JS、
Jade tutorial
Jade チュートリアル Jadeとは JadeはNode.jsのHTMLテンプレートエンジンで、Slimによく似ているが異なる部分もある。 Jade GitHub インストール Node.jsをインストールすると、npmコマンドが利用できるようになる。 その後、下のようにしてインストールする。 HTMLへの変換 jadeソースをHTMLに変換するには、次の例のようにする。-Pを省略したときは、uglyソースに変換される。 jade -P sample1.jade 使用例 レイアウトを使わない例 doctype html head meta(charset="utf-8") title サンプル link(rel="stylesheet", href="sample.css") body h1= title p a(href="/index.html") HOME p レイアウトを使う例
Jade を React と組み合わせて使う | スマホ神 – JavaScript 受託開発 –
テンプレートエンジンである Jade を React と組み合わせて使ってみます。 インストール ES6 でプログラムを書くために babel を使います。 Jade の変換には react-jade を使います。それぞれインストールしておきます。 $ npm install -g browserify bablify $ npm install -D react-jade $ npm install -S react Jade の変更用コード Jade の変換にいい感じのコマンドなどがないようなので自分で書きます。 app.jade を app.js にコンパイルします。 var fs = require('fs'); var path = require('path'); var jade = require('react-jade'); var code = jade.compile
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
