README
generator-nswebapp 
Yeoman generator for Web Applications with GruntJS
generator-nswebapp is yeoman based generator for building the web applications. It is created as a sum of everything that you can find all over www and which is really necessary and helpful to start your work of building web application.
Prerequisites
In order to use this generator-nswebapp, you'll need to install the latest version of nodeJS and for Windows users Ruby. Once when you install the latest version of nodeJS, or you already have it, you'll need to install globally following packages using node package manager (npm):
- yo
- generator-nswebapp
- grunt
- grunt-cli
- bower
To do so, you can just simply run npm command
npm install -g yo generator-nswebapp grunt grunt-cli bower
Once when you install Ruby or you already have it, you'll need to install following ruby gems (required for Grunt tasks):
- sass
- compass
To do so, you can just simply run command
gem install sass compass
Once you are done with installation of all prerequisites, you'll be good to go to use generator-nswebapp.
Usage
Make a new project directory, and cd into it:
mkdir 'path/to/the/project/directory' && cd 'path/to/the/project/directory'
If you are done with this step, it is time to run and use generator-nswebapp using following command:
yo nswebapp [projectName]
for example:
yo nswebapp myWebApp
if you want to skip installation of the node and bower dependencies you can use --skip-install generator option,
but this is not required if you running installation for a first time:
yo nswebapp myWebApp --skip-install
Application Generator will sets up a new Web app, generating Grunt file with tasks and all the boilerplate you need to get started. The app generator is offering also optionally to install additional Third party libraries, such are jQuery and Bootstrap. Bootstrap CSS only, third party library will be installed by default if you choose to not use bootstrap js.
Application Directory Layout
app/ --> all of the source files for the application
index.html --> the main html template for the application
favicon.ico --> favicon file
assets/
bower_components/ --> 3rd party libraries managed by bower
css/ --> css source files
style.css --> default stylesheet
fonts/ --> fonts source files
images/ --> images source files
logo.svg --> logo image file
js/ --> app JS files
script.js --> JavaScript file
dist/ --> distributable version of app built using grunt and Gruntfile.js
node_modules/ --> npm managed libraries used by grunt
src/ --> source directory for JS and SASS/SCSS files
scss/ --> SCSS/SASS directory
mixins/ --> mixins
modules/ --> common modules
partials/ --> partials
vendor/ --> CSS or Sass from other projects
style.scss --> primary Sass file
js/ --> JavaScript source file directory used for grunt tasks
script.js --> default JavaScript source file
.bowerrc --> bower configuration file
.gitattributes --> git attributes file
.gitignore --> git ignore config file
.jshintrc --> jshintrc config file
.travis.yml --> travis ci continuous build config file
.yo-rc.json --> yeoman configuration options file
bower.json --> package definition manifest for bower
Gruntfile.js --> Grunt build file
package.json --> package definition manifest for Node/npm
Gruntfile.js & Grunt tasks
Gruntfile.js contains following main grunt tasks:
Grunt
Grunt default task runner.
Example:
grunt
or
grunt default
Grunt default snippet:
grunt.registerTask('default', [
'sass:dev',
'jshint',
'concat:dev',
'injector:dev',
'injector:bower',
'connect:livereload',
'open',
'watch'
]);
Grunt default task contains following grunt sub-tasks:
- sass:dev - SCSS/SASS compiler for development (expanded CSS style)
- jshint - JSHint
- concat:dev - Concatenate JavaScript source files and place script file in development directory
- injector:dev - Inject references (js files and stylesheets) into a html file
- injector:bower - Inject bower references into a html file
- connect:livereload - Starts a local webserver with livereload
- open - Open the webserver in the browser
- watch - Watching development files and run concat/compile tasks
Grunt Build
Grunt build task runner. Build task is running clean, copy, minify application files into dist directory and perform content optimization for distribution.
Example:
grunt build
Grunt build snippet:
grunt.registerTask('build', [
'clean',
'copy',
'sass:dist',
'jshint',
'concat:dist',
'uglify',
'injector:dist',
'injector:bower',
'imagemin:dist',
'htmlmin:dist'
]);
Grunt build task contains following grunt sub-tasks:
- clean - Cleans dist folder
- copy - Copy app files and folders in dist directory
- sass:dist - SCSS/SASS compiler for distribution (compressed CSS)
- jshint - JSHint
- concat:dist - Concatenate JavaScript source files and place script file in dist directory
- uglify - Compresses and minifies all JavaScript files
- injector:dist - Inject references (js files and stylesheets) into a html file for distribution
- injector:bower - Inject bower references into a html file for distribution
- imagemin:dist - Compresses and minify images
- htmlmin:dist - Minify HTML
Continuous Integration
Travis CI
Travis CI is a continuous integration service, which can monitor GitHub for new commits
to your repository and execute scripts such as building the app or running tests. generator-nswebapp and also generated application
project contains a Travis configuration file, .travis.yml, which will cause Travis to run your
tests when you push to GitHub.
You will need to enable the integration between Travis and GitHub. See the Travis website for more instruction on how to do this.
Changelog
Recent changes can be viewed on Github on the Releases Page