Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Grunt - The JavaScript Task Runner

6.001 visualizaciones

Publicado el

Grunt is a task-based command line build tool for JavaScript projects.

Publicado en: Tecnología

Grunt - The JavaScript Task Runner

  1. 1. 1GRUNTTHE JAVASCRIPT TASKRUNNERMohammed ArifManager Interactive Development @ SapientNitrowww.mohammedarif.com!/arif_iq
  2. 2. 2AGENDA What is grunt? Why Grunt? How Do I start? npm Node.js How Do I Install it? How Do I Use it? Demo Who have been using it? Q & A
  3. 3. 3WHAT ISGRUNT?Grunt is a task-based command line build tool for JavaScriptprojects.
  4. 4. 4TASK-BASED?• Unit testing• JS linting• Concatenating/minifying• Image optimization• Replace scripts in html files• SASS• …
  5. 5. 5WHY GRUNT?• Open Source• Large Community• Easy to use• Hundreds of plugins• Build your own (plugin)
  6. 6. 6WHY GRUNT?Ant
  7. 7. 7WHY GRUNT?Grunt
  8. 8. 8HOW DO I START GRUNT?• npm• node.js
  9. 9. 9NPM?npm {Node Packaged Modules} manages dependencies for anapplication through the command line.
  10. 10. 10NODE.JS?node.js is an open source command line tool built for the server sideJavaScript.The JavaScript is executed by the V8 (Googles open sourceJavaScript engine).
  11. 11. 11HOW DO I INSTALL GRUNT CLI?$ npm install -g grunt-cliThis will put the grunt command in your system path, allowing it tobe run from any directory.* Note that installing grunt-cli does not install the grunt task runner!You need to install Grunts command line interface (CLI) globally.
  12. 12. 12HOW DO I INSTALL GRUNT?$ npm install grunt –-save-devThis will install the latest version of Grunt in your project folder,adding it to your devDependencies in package.json* Same way you can install the grunt plugins i.e. npm install {module} --save-dev
  13. 13. 13HOW DO I USE GRUNT?• package.json• GruntFile.js
  14. 14. 14package.json{"name": "my-project-name","version": "0.1.0","devDependencies": {"grunt": "~0.4.1","grunt-contrib-jshint": "~0.1.1","grunt-contrib-nodeunit": "~0.1.2"}}
  15. 15. 15GruntFile.jsmodule.exports = function(grunt) {// Project configuration.grunt.initConfig({pkg: grunt.file.readJSON(package.json),uglify: {options: {banner: /*! <%= %> <"yyyy-mm-dd") %> */n},build: {src: src/<%= %>.js,dest: build/<%= %>.min.js}}});// Load the plugin that provides the "uglify" task.grunt.loadNpmTasks(grunt-contrib-uglify);// Default task(s).grunt.registerTask(default, [uglify]);};
  16. 16. 16DEMO$ git clone -b 1.1$ npm install
  17. 17. 17WHO HAVE BEEN USING IT?• jQuery• Yeoman• Modernizr• Adobe• Twitter• Filament Group• Bocoup• …
  18. 18. Q & A
  19. 19. 19feedback
  20. 20. 20THANK YOU