generator-react-css-modulesify 
React + css-modulesify + gulp + browserify
This generator creates a new frontend-only project using React. It makes no assumption on your backend. It transpiles all the stuff into static folder, and you can point your statics folder to it on your server, or link it anywhere you want.
The new project use css-modulesify to provide a webpack-like way of importing styles from css. It provides component scoped css isolation to avoid naming conflict.
Ideally a component will have a name.js under src/components and name.css under src/css if it needs its own styles.
Installation
First, install Yeoman and generator-react-css-modulesify using npm (we assume you have pre-installed node.js).
npm install -g yonpm install -g generator-react-css-modulesifyThen generate your new project:
yo react-css-modulesifyUsage
Bundling
The project makes two bundles: one for vendors dependencies, which does not change very often, and one for your app. For every entry file, a compiled css file will be created under statics/css e.g. main.css.
You can define vendor dependencies and entry files by udpating VENDORS and ENTRIES in gulpfile.babel.js
# Build vendor bundle gulp build:vendor# Build main.js gulp build# Build other entry gulp build -f path/to/other-entry.js# Build all entries if you have more than one gulp build:allWatching
The project use livereactload to provide hot reloading.
# Watch mian.js gulp watch# Watch other entry gulp watch -f path/to/other-entry.js# Watch all entries if you have more than one gulp watch:allNote that you have to serve index.html with a server in order for the page to reach the live reload server. Also changes made to css files will not update automatically (yet), you have to manually refresh the page.
Getting To Know Yeoman
- Yeoman has a heart of gold.
- Yeoman is a person with feelings and opinions, but is very easy to work with.
- Yeoman can be too opinionated at times but is easily convinced not to be.
- Feel free to learn more about Yeoman.
License
MIT © inoc603