あらすじ
最近 Google が Material design なるものを発表して material design light という css と javascript を公開しました
https://github.com/google/material-design-lite
そして、これと React.js 使ってアプリ使いたい気分になった今日この頃なのですが、すでにそういうのがありました。
という事で試してみました。
% mkdir ~/awesome-material-ui && cd $_ % npm init --force % npm install browserify babelify watchify material-ui --save-dev
ディレクトリを用意
% mkdir -p src/components build % touch src/index.jsx src/components/main.jsx % touch build/index.html build/bundle.js build/style.css
material-ui の example をそのまま使用する
% curl -s https://raw.githubusercontent.com/callemall/material-ui/master/example/src/app/app.jsx > src/index.jsx % curl -s https://raw.githubusercontent.com/callemall/material-ui/master/example/src/app/components/main.jsx > src/components/main.jsx % curl -s https://raw.githubusercontent.com/callemall/material-ui/master/example/src/www/index.html > build/index.html % curl -s https://raw.githubusercontent.com/callemall/material-ui/master/example/src/www/main.css > build/main.css
react の components を browserify する
% $(npm bin)/browserify -t babelify src/index.jsx -o build/app.js
動作確認
% cd build % python -m SimpleHTTPServer 8000
package.json を編集
以下の箇所を修正
"scripts": {
"build": "browserify --debug -t babelify src/index.jsx > static/app.js",
"build-dist": "NODE_ENV=production browserify -t babelify src/index.jsx | uglifyjs -m > dist/app.js",
"watch": "watchify --debug -t babelify src/index.jsx -o static/app.js -v"
},
動作確認
% npm run build
Grunt と Gulp はいつまで争うのか?
個人的な見解だと Grunt の記法だと設定が長々となるので Gulp が pipe 記法はじめてスッキリ書けますよ、という話だと思うのですが...
Grunt がそのインターフェースを採用する(はず)だし、私は Grunt を coffee で書くので困らないです。どっちでもいいので早くどっちかが主流になってほしいです。
そんなわけで最近はどちらにも関与しないように package.json に記述して npm run xxx するようにしています。
Reactify は使わない流れらしい
Deprecating JSTransform and react-tools
ということらしいです。
http://facebook.github.io/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html
