Skip to content
This repository has been archived by the owner on Jun 6, 2023. It is now read-only.

Slight rewrite and extension of README.md #17

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
75 changes: 37 additions & 38 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,21 +1,21 @@
# generator-rf [![Build Status](https://secure.travis-ci.org/taiansu/generator-rf.png?branch=master)](https://travis-ci.org/taiansu/generator-rf) [![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/taiansu/generator-rf?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)

> RF: a [React](http://facebook.github.io/react/)/[Flux](http://facebook.github.io/flux/) generator with webpack, dialects and some good stuffs.
> RF: a [React](http://facebook.github.io/react/)/[Flux](http://facebook.github.io/flux/) generator with Webpack, multiple JavaScript and Stylesheet dialects, Bootstrap, and some more good stuff.

### What's inside
* [React](http://facebook.github.io/react/)
* [Flux](http://facebook.github.io/flux/)
* [Jest](http://facebook.github.io/jest)
* [webpack](http://webpack.github.io/)
* [Webpack](http://webpack.github.io/)
* SourceMap from webpack's [devtool](http://webpack.github.io/docs/configuration.html#devtool)
* Live-reload by [react-hot-loader](https://gaearon.github.io/react-hot-loader/)
* JS dialect in your favor:
* ES6 powered by [Babel](https://babeljs.io/) (Formally Javascript 6to5)
* Your favorite JS dialect:
* ES6 powered by [Babel](https://babeljs.io/) (formally JavaScript 6to5)
* [CoffeeScript](http://coffeescript.org/)
* [LiveScript](http://livescript.net)
* vanilla JavaScript
* Have JSX in CoffeeScript/LiveScript by [coffee-react-transform](https://github.com/jsdf/coffee-react-transform)
* Stylesheet syntax in your favor:
* Your favorite Stylesheet syntax:
* [SASS/SCSS](http://sass-lang.com/)
* [Less](http://lesscss.org/)
* [Stylus](http://learnboost.github.io/stylus/)
Expand All @@ -24,57 +24,57 @@

### What 'RF' stands for

No, not the boring abbreviation of "React" and "Flux". It's actually the suffix of `rm -rf`. Now it sounds [dangerous](https://github.com/MrMEEE/bumblebee-Old-and-abbandoned/issues/123) and cooler, doesn't it?
No, it's not the boring abbreviation of "React" and "Flux". It's actually the suffix of `rm -rf`. Now it sounds more [dangerous](https://github.com/MrMEEE/bumblebee-Old-and-abbandoned/issues/123) and cool, doesn't it?

## Installation

### Prerequisites

* [Node.js w/npm](http://nodejs.org/) or [iojs](https://iojs.org/) installed. I
recommend install it by [nvm](https://github.com/creationix/nvm). Mac user can
recommend installing it using [nvm](https://github.com/creationix/nvm). Mac users can
install nvm from [homebrew](http://brew.sh/).

> Note: Jest doesn't work on `io.js` & `node v0.11 ~ v0.12`,
> if you like to have jest works, make sure you use `node.js 4.0` above or `v0.10`
> Note: Jest doesn't work on `io.js` & `node v0.11 ~ v0.12`.
> If you would like to use Jest, make sure you use `node.js 4.0` or above or `v0.10`

### Install [Yeoman](http://yeoman.io)
### Installing [Yeoman](http://yeoman.io)

```bash
npm install -g yo
```

### Install RF generator
### Installing the RF generator

```bash
npm install -g generator-rf
```

## Getting Started

### Intiate Project
### Initiating a Project

For example, to create a project named "myapp", just type:
To create a project named "myapp", just type:

```bash
yo rf myapp
```

### Run it up
### Running the dev server

```bash
cd myapp && npm run dev
```

Then Open [http://localhost:8080](http://localhost:8080) in the browser and have fun!
Then open [http://localhost:8080](http://localhost:8080) in your browser and have fun!

### Run the test suit
Don't forget to test your project by:
### Running the test suite
Don't forget to test your project by running:

```bash
npm test
```

### Build for deploy
### Building for deployment

```
npm run build
Expand Down Expand Up @@ -112,27 +112,27 @@ npm run build
├── webpack.dev.config.js
└── webpack.prod.config.js

* \* Won't create root directory if your current directory is identical with your project name. Check [--skip-root](#--skip-root-dont-create-root-directory) section for detail.
* \*\* Varied by your choices of the dialect and stylesheet syntax
* \* It won't create the root directory if your current directory is identical with your project name. Check the [--skip-root](#--skip-root-dont-create-root-directory) section for details.
* \*\* Varied by your choices of dialect and stylesheet syntax


## What `npm run build` gives:
.
└── myapp
├── build
│   ├── bundle.js
│   ├── some bootstrap stuffs (if include)
│   ├── some Bootstrap stuff (if included)
│   └── ...
└── ...

## Options

### --d: Dialect

By default, RF will generate codes in ES6, using [Babel](https://babeljs.io/). If you don't like it, use --d flag to change the dialect to generate.
By default, RF will generate ES6 code using [Babel](https://babeljs.io/). Use `--d` flag to change the dialect to generate.

* `ls` for [LiveScript](http://livescript.net)
* `coffee` for [coffee-script](http://coffeescript.org/)
* `coffee` for [CoffeeScript](http://coffeescript.org/)
* `js` for vanilla JavaScript

Example:
Expand All @@ -141,37 +141,36 @@ Example:

### --s: Stylesheet Syntax

RF generate [SASS](http://sass-lang.com/) (indented syntax) by default. Use --s flag to change it.
RF generate [SASS](http://sass-lang.com/) (indented syntax) by default. Use the `--s` flag to change it.

* `scss` for SCSS (Sassy CSS)
* `less` for LESS
* `stylus` for Stylus
* or `css` for CSS.
* `css` for CSS.

Example:

yo rf myapp --s=scss

### --skip-bootstrap: Don't include Bootstrap framework stuffs
### --skip-bootstrap: Don't include the Bootstrap framework

RF includes Bootstrap settings in the real __Webpack__ way. Turn them off by --skip-bootstrap flag.
RF includes Bootstrap settings in the proper __Webpack__ way. Skip them by using the `--skip-bootstrap` flag.

Example:

yo rf myapp --skip-bootstrap

### --skip-root: Don't create root directory
### --skip-root: Don't create the root directory

RF creates a root directory if current directory name is different from your appname, or generate files in current directory if they have same name. But if you're intentionally have them with different name, use --skip-root to generate files right in the current directory.
RF creates a root directory if the current directory name is different from your app name, or generate files in the current directory if the have the same name. But if you intent to give them different names, use `--skip-root` to generate files in the current directory.

Example:

yo rf trueName --skip-root

### --skip-test: Don't create \_\_tests\_\_ directories

For every sub-directories in `src/scripts`, RF will create a \_\_tests\_\_ directory
within. Use `skip-test` to skip that.
RF will create a `__tests__` directory in every subdirectory of `src/scripts`. Use the `--skip-test` flag to skip that.

Example:

Expand All @@ -183,20 +182,20 @@ Example:

yo rf myapp --skip-install

## Contribute
## Contributing

* Fork this project
* run `npm install && npm test` and make sure all test are pass
* Make your changes with [a bit of test](http://yeoman.io/authoring/testing.html)
* For commit message of pull request, please check [these useful tips](http://robots.thoughtbot.com/5-useful-tips-for-a-better-commit-message) ahead.
* run `npm install && npm test` and make sure all test pass
* Make your changes include [a couple of tests](http://yeoman.io/authoring/testing.html)
* For the commit message of the pull request, please check [these useful tips](http://robots.thoughtbot.com/5-useful-tips-for-a-better-commit-message) in advance.

## TODO

* PostCSS support
* Actions w/Constants, Store
* Actions with Constants, Stores
* Custom template folder
* Component and Mixin generate command
* Isomorphic server script(?)
* Component and Mixin generation commands
* Isomorphic server script (?)

## License

Expand Down