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
  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:
    • Uglify:
      • beautifies js code
    • Sass:
      • Complies sass files to css
      • Installing grunt-contrib-sass

Advertisements