Successfully reported this slideshow.
/Fabien Doiron @fabien_doiron
WHATS INSIDE?what is gruntwhy use gruntsetup grunt dependenciesimportant commandsstarting a new grunt projectgrunt in action
FABIEN DOIRON?Software Developer - Front End fabien-d fabien_doiron
WHAT IS GRUNT?"cowboy" Ben Alman(in other words: JavaScript task runner)current stable version: 0.4.1“task-based command l...
WHY USE GRUNT?open source softwarelarge communityease of useproject sponsored by Bocouphundreds of pluginsor build your own
SETUP GRUNT DEPENDENCIES
INSTALL NODE + NPM(Id suggest looking at NVM)www.nodejs.org
UNINSTALL GRUNTif youve installed grunt globally in the pastnpm uninstall -g grunt
INSTALL GRUNT CLI(Command Line Interface)does NOT install the grunt task runnerallows multiple version of grunt simultaneo...
IMPORTANT GRUNT COMMANDSinstalls all dev dependencies from package.json--save-dev adds module to package.json as dev depen...
STARTING A NEW GRUNT PROJECTcreate 2 filespackage.json Gruntfile.js
PACKAGE.JSON EXAMPLE{"name": "my-project","version": "0.1.0","devDependencies": {"grunt": "~0.4.1","grunt-contrib-jshint":...
GRUNTFILE.JSeasy as 1, 2, 3 ... 4*
1. install module(terminal, project root directory)2. load module(Gruntfile.js)npm install grunt-contrib-jshint --save-dev...
3. configure task(Gruntfile.js)4. register task*(Gruntfile.js) * register is optionalgrunt.initConfig({jshint: { ... }});g...
GRUNTFILE.JS EXAMPLEmodule.exports = function(grunt) {// Project configuration.grunt.initConfig({pkg: grunt.file.readJSON(...
GRUNT FOLDER STRUCTUREnode_modules/grunt/grunt-contrib-jshint/Gruntfile.jspackage.json
GRUNT IN ACTIONJS linting*watch task*JS minificationcleanJS testing (mocha/chai)SASS -> CSSdev tasks & prod tasksreplace s...
RESOURCESnodejs.orgnpmjs.orggruntjs.comgruntjs pluginsgruntjs stackoverflowgruntjsfabien-d
END
Upcoming SlideShare
Loading in …5
×

Grunt Talk Given at Ottawa JS

2,123 views

Published on

Code sample from my talk at Ottawa JS on Grunt - May 8, 2013. Code samples on GitHub at https://github.com/fabien-d/OttawaJS-Grunt.

Published in: Technology
  • Be the first to comment

Grunt Talk Given at Ottawa JS

  1. 1. /Fabien Doiron @fabien_doiron
  2. 2. WHATS INSIDE?what is gruntwhy use gruntsetup grunt dependenciesimportant commandsstarting a new grunt projectgrunt in action
  3. 3. FABIEN DOIRON?Software Developer - Front End fabien-d fabien_doiron
  4. 4. WHAT IS GRUNT?"cowboy" Ben Alman(in other words: JavaScript task runner)current stable version: 0.4.1“task-based command line build tool forJavaScript projects that makes performingrepetitive but necessary tasks trivial”
  5. 5. WHY USE GRUNT?open source softwarelarge communityease of useproject sponsored by Bocouphundreds of pluginsor build your own
  6. 6. SETUP GRUNT DEPENDENCIES
  7. 7. INSTALL NODE + NPM(Id suggest looking at NVM)www.nodejs.org
  8. 8. UNINSTALL GRUNTif youve installed grunt globally in the pastnpm uninstall -g grunt
  9. 9. INSTALL GRUNT CLI(Command Line Interface)does NOT install the grunt task runnerallows multiple version of grunt simultaneouslynpm install -g grunt-cli
  10. 10. IMPORTANT GRUNT COMMANDSinstalls all dev dependencies from package.json--save-dev adds module to package.json as dev dependencygrunt modules are installed in node_modules/ directorynpm installnpm install {{PACKAGE_NAME}} --save-devgrunt grunt {{TASK}}grunt {{TASK}}:{{TARGET}}
  11. 11. STARTING A NEW GRUNT PROJECTcreate 2 filespackage.json Gruntfile.js
  12. 12. PACKAGE.JSON EXAMPLE{"name": "my-project","version": "0.1.0","devDependencies": {"grunt": "~0.4.1","grunt-contrib-jshint": "~0.4.3"}}
  13. 13. GRUNTFILE.JSeasy as 1, 2, 3 ... 4*
  14. 14. 1. install module(terminal, project root directory)2. load module(Gruntfile.js)npm install grunt-contrib-jshint --save-devgrunt.loadNpmTasks(grunt-contrib-jshint);
  15. 15. 3. configure task(Gruntfile.js)4. register task*(Gruntfile.js) * register is optionalgrunt.initConfig({jshint: { ... }});grunt.registerTask(default, [jshint]);
  16. 16. GRUNTFILE.JS EXAMPLEmodule.exports = function(grunt) {// Project configuration.grunt.initConfig({pkg: grunt.file.readJSON(package.json),jshint: { ... }});// Load the "jshint" task.grunt.loadNpmTasks(grunt-contrib-jshint);// Register task(s).grunt.registerTask(default, [jshint]);};
  17. 17. GRUNT FOLDER STRUCTUREnode_modules/grunt/grunt-contrib-jshint/Gruntfile.jspackage.json
  18. 18. GRUNT IN ACTIONJS linting*watch task*JS minificationcleanJS testing (mocha/chai)SASS -> CSSdev tasks & prod tasksreplace scripts in HTML files* build together
  19. 19. RESOURCESnodejs.orgnpmjs.orggruntjs.comgruntjs pluginsgruntjs stackoverflowgruntjsfabien-d
  20. 20. END

×