标签：
$ mkdir ilovereact$ cd ilovereact$ npm init
Node .gitignore
curl https://raw.githubusercontent.com/github/gitignore/master/Node.gitignore > .gitignore
$ git init$ git add .$ git commit -m "Project init"$ git show HEAD
创建index.html。 可以直接调整HTML5-boilerplate
<!-- 使用 html5 语法 --><!doctype html><html lang="en"><head><meta charset="utf-8"><!-- 强制 IE 遵循现代标准 --><meta http-equiv="x-ua-compatible" content="ie=edge"><title></title><meta name="description" content=""><!-- 在移动端禁用缩放。对响应式设计有用。 --><meta name="viewport" content="width=device-width, initial-scale=1"><!-- <link rel="apple-touch-icon" href="apple-touch-icon.png"> --><!-- <link rel="stylesheet" href="css/app.css"> --></head><body><h1>I Love React</h1><!-- <script src="js/app.js"></script> --></body></html>
$ git remote add origin git@github.com:yinxufeng/sikeio-ilovereact.git$ git push -u origin master
- 要关联一个远程库，使用命令
git remote add origin git@server-name:path/repo-name.git；- 关联后，使用命令
git push -u origin master第一次推送master分支的所有内容；- 此后，每次本地提交后，只要有必要，就可以使用命令
git push origin master推送最新修改；
git push origin master:gh-pages
然后你应该可以看到这个页面：http://yinxufeng.github.io/sikeio-ilovereact/
$ npm install browser-sync@2.9.3 --save -d
--save把 browser-sync 添加到package.json。-d使 npm 输出更多的日志信息。
如果一个 NPM 包是一个命令行工具，可执行文件会被安装在node_modules/.bin目录中。
$ ls node_modules/.binbrowser-sync
为了让系统在./node_modules/.bin中查找browser-sync，我们需要把那个目录添加到 PATH 环境变量中：
# vi ~/.bashrc or ~/.zshrc or ~/.bash_profileexport PATH=$PATH:./node_modules/.bin
运行 BrowserSync 服务器
$ browser-sync start --server --files=index.html
--files=index.html指定如果index.html改变了，自动刷新浏览器。
使用浏览器打开 http://localhost:3002, 你可以开始实时编辑了
创建Makefile:
# Makefile.PHONY: serverserver:# WARNING: The indentation MUST be a tab. Spaces won‘t work.browser-sync start --server --files=index.html
运行 browser-sync:
make server
一个 Makefile“规则”通常会创建作为输出的文件.
.PHONY: server是说server是一个任务，而且并不创建文件。市面上的 Makefile 教程几乎都是关于 C/C++ 项目的。查看一个不错的介绍：Using GNU Make as a Front-end Development Build Tool
在我们开始这个项目前，我们应该添加一些 CSS 来解决常见的跨浏览器问题。此外，为了让 CSS 布局更简单，我们会采用 ReactNative 的flexbox设置。
Sass 和 Less 是最受欢迎的两个 CSS 预处理器。它们是有着大量特性（变量，循环语句，条件语句，函数）的完备语言，可以生成复杂的 CSS 样式表。我们不需要那个。
Less/Sass 的替代品之一是 PostCSS。PostCSS 不是一种语言。它是一个解析器，解析标准 CSS 语法，而且允许你安装 JavaScript 插件通过不同方法来转换 CSS。使用 PostCSS，你可以添加你需要的功能。
安装 PostCSS command line tool：
npm install postcss-cli@2.1.0 --save-dev
查看一下 flexbox 的浏览器支持表 Can I Use: Flexbox
你需要为每个你支持的浏览器添加浏览器引擎前缀。 这条 CSS 规则也许看起来是这样：
.a-flexible-row {/* 不用浏览器引擎前缀就支持 flexbox 的浏览器 */flex-direction: row;/* Safari 8, Android 4.3 或更早版本, iOS Safari 7/8 */-webkit-flex-direction: row;/* IE 10 */-ms-flex-direction: row;}
autoprefixer工具自动给你添加浏览器引擎前缀。另外，它使用一个 浏览器市场占有率数据库 来决定某个特殊的特性是否仍旧需要浏览器引擎前缀。
npm install autoprefixer@6.0.2 --save-dev
ReactNative 中元素默认从上到下排列，但是在浏览器中默认是从左到右排列。结果是 ReactNative 的设定更加友好，所以让我们使浏览器表现出同样的行为。
css/app.css 中:
body, div, span {box-sizing: border-box;position: relative;display: flex;flex-direction: column;align-items: stretch;flex-shrink: 0;align-content: flex-start;border: 0 solid black;margin: 0;padding: 0;}
postcss 和 autoprefixer 来转换CSS文件：
mkdir -p bundlepostcss --use autoprefixer css/app.css --output bundle/app.css
可以看到在 bundle/app.css 中，自动添加前缀的 CSS 属性
浏览器行为表现彼此略有不同。normalize.css使浏览器行为更相似
npm install --save normalize.css@3.0.3
我们使用postcss-import插件来导入 normalize.css 而不是使用另外一个 link 元素。
npm install --save-dev postcss-import@7.0.0
/* css/app.css */@import "../node_modules/normalize.css/normalize.css";/* 因为 normalize.css 被安装在 node_modules 目录里，你实际上可以使用包名称来导入@import "normalize.css";*/
postcss --use autoprefixer --use postcss-import css/app.css --output bundle/app.css
把Makefile 改成下面这样：
.PHONY: csscss:mkdir -p bundlepostcss --watch --use autoprefixer --use postcss-import css/app.css --output bundle/app.css.PHONY: serverserver:browser-sync start --server --files=‘index.html,bundle/app.css‘.PHONY: cleanclean:rm -r bundle
- 为 postcss 添加了
--watch选项，因此每当你作出改动时，它重新构建 css/app.css。- 把 bundle/app.css 添加到了
--files，因此每当我们重新构建时， BrowserSync 重新加载。
如果用Brackets代码编辑器，可以不用browser-sync，自带实时编辑功能
标签：
原文地址：http://www.cnblogs.com/yinxufeng/p/4828788.html
