Angular JS

***Preparing content***

GruntJS

References:

http://gruntjs.com/
http://gruntjs.com/getting-started

Note: Bootstrap uses Grunt for its build system, with convenient methods for working with the framework. It’s how we compile our code, run tests, and more.  (http://getbootstrap.com/getting-started/)

Grunt commands:

1. grunt dist
   • Regenerates the /dist/ directory with compiled and minified CSS and JavaScript files.
2. grunt watch
   • Watches the Less source files and automatically recompiles them to CSS whenever you save a change.
3. grunt test
   • Runs JSHint and runs the QUnit tests headlessly in PhantomJS.
4. grunt docs
   • Builds and tests CSS, JavaScript, and other assets which are used when running the documentation locally via bundle exec jekyll serve.
5. grunt
   • Compiles and minifies CSS and JavaScript, builds the documentation website, runs the HTML5 validator against the docs, regenerates the Customizer assets, and more. Requires Jekyll.

• npm required for Grunt
• Grunt is a javascript task runner
  • compress everything – all done by grunt
  • compiles Sass into css
  • compress JavaScript, CSS, HTML files
  • Combine JS files into a single file
  • Concatenates JS & CSS files
• Build system with grunt
• Software dependencies:
  • Node – javascript runtime
  • npm – package manager
  • grunt cli
  • grunt
  • plugins
• Installing grunt
  • npm install grunt
  • pakcage json has to be created
    • npm init – creates the package json
    • package name has to be defined and shouldn’t be ‘grunt’
• Installing grunt cli
  • npm install -g grunt-cli
• Running grunt
  • grunt
• Running grunt tasks
  • grunt taskname
• Using existing project:
  • npm intall – will install all dependencies
• Plugins:
  • grunt has so many plugins
    • loadNpmTasks – loads the default configs
    • To concat, you need to load the grunt-contrib-concat & to watch the changes grunt-contrib-watch
    • Installing grunt-contrib
      • npm install grunt-contrib-concat –save -dev
      • similar commands for all plugins
  • Handlebars:
    • https://www.npmjs.com/package/grunt-contrib-handlebars
    • Path to results to path to source hbs
  • Uglify:
    • beautifies js code
  • Sass:
    • Complies sass files to css
    • Installing grunt-contrib-sass
      • Need to have ruby installed before installing sass to get this working – http://rubyinstaller.org/downloads/
      • Need to have sass installed – http://sass-lang.com/install
        • gem install sass
        • Ruby uses Gems to manage its packages
      • Note: Files that begin with “_” are ignored even if they match the globbing pattern. This is done to match the expected Sass partial behaviour.