generator-react-browserify-sass v0.2.1
react-browserify-sass
Yeoman generator for a really basic web app scaffolding that includes React, Browserify and Sass.
Installation
npm install -g generator-react-browserify-sass
If you don't already have Yeoman installed on your system, you can install it with the following command.
npm install -g yo
Usage
Switch into the project directory and run this generator with the Yeoman command line interface like so.
yo react-browserify-sass <appName>
In that example, <appName>
represents the name of your application which will be used as the name field in the package.json
file, the default content in the <title>
tag of the generated index.html
file and as the default class name of your application's root element in the generated App.jsx
component as well as the main.scss
SASS file.
Create a new React component with the component
sub-generator as follows.
yo react-browserify-sass:component <componentName>
In that example, <componentName>
represents the name of your component which will be used in generated filenames and as the class name for the component's root element.
Results
Generator
The base generator:
- adds
.eslintrc
,.gitignore
,gulpfile.js
,index.html
,package.json
,components/App.jsx
,js/index.js
, andsass/main.scss
to the directory. - runs
npm install
to pull in all the modules referenced in thepackage.json
file. - runs
gulp
which calls thelint
,javascript
andstyles
tasks to initialize the application.
The directory should contain the following directory and file structure when all is said and done.
.
├── components
│ └── App.jsx
├── dist
│ └── bundle.js
│ └── main.css
├── js
│ └── index.js
├── node_modules
│ └── buncha module directories
├── sass
│ └── main.scss
├── .eslintrc
├── .gitignore
├── .yo-rc.json
├── gulpfile.js
├── index.html
└── package.json
Sub-generator
The component sub-generator:
- adds
components/<componentName>/<componentName>.jsx
where<componentName>
is the value provided to the sub-generator. - adds
components/<componentName>/<componentName>.scss
. - adds an
@import
of the component's new.scss
tosass/main.scss
. - runs
gulp
.
Available gulp tasks
The installed gulp file includes the following tasks:
javascript
: runsbrowserify
usingbabelify
as the transformer withjs/index.js
as the entry point and outputsdist/bundle.js
.lint
: runseslint
on all.js
and.jsx
files in thecomponents
andjs
directories usingeslint-plugin-react
for React's specialized JSX syntax.styles
: runssass
on all.scss
files in thecomponents
andsass
directories and outputsdist/main.css
.build
: runs thelint
,javascript
andstyles
tasks in that order.watch
: runs thebuild
task and then sets up watchers each of the individual tasks run bybuild
.serve
: runs thewatch
task, starts a local server on port 8899 and launches a web browser that loads http://localhost:8899/index.html.default
: runs thebuild
task.