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 or grunt default
• grunt build

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

License

ISC license