ºÝºÝߣ

ºÝºÝߣShare a Scribd company logo

Front end task automation using grunt, yeoman and npm(1)

?Download as PPTX, PDF?
?
Frank Marcelo
Frank Marcelo

Grunt, Bower, Yeoman, and NPM are tools that can be used to automate front-end development tasks. Grunt is a task runner that can perform repetitive tasks like minification, compilation, testing. Bower is a package manager for installing web dependencies. Yeoman helps generate project scaffolding and handles tasks like compiling CoffeeScript. NPM (node package manager) installs and manages Node.js packages and programs. These tools can automate workflows, save time, and improve efficiency compared to manually performing repetitive tasks.

1 of 23
Downloaded 40 times
Front-End Task Automation Friday, 25 October 13 with Grunt,Bower,Yeoman and NPM
Agenda Overview: - What is automation - Reasons of automation - Old ways of workflow - Automation systems available Demonstration of NPM, Grunt, Yeoman and Bower: Application to Learning Management System:
What is automation? - The term automation, inspired by the earlier word Automatic (coming from automaton), was not widely used before 1947, when General Motors established the automation department.[1] It was during this time that industry was rapidly adopting feedback controllers, which were introduced in the 1930s. - The technique, method, or system of operating or controlling a process by highly automatic means, as by electronic devices, reducing human intervention to a minimum. - Simply make the system work automatically.
Reasons of automation? - Increase effectiveness, efficiency and coverage. - Decrease monotonous process which can lead to unexpected mistake. - Time saving translates to cost savings - Because developers are LAZY, and we¡¯d rather play pool while running the automation¡­.
Old ways of workflow - Scaffolding - Convert PSD to sprite Gifs, Pngs or Jpgs - Create index.html - Download external vendors e.g jQuery, jQuery ui, angularJS, Bootstrap - Reference the vendors inside the ¡°href¡± - Open browser, test and do tweaks and reload browser It would be +1 if the dev is doing some compression or minify on CSS, Javascript or assets with YUI Compressor or UglifyJS. http://yui.github.io/yuicompressor/
time spe nt task size non- geek gee k does it manually makes fun of geek¡¯s lose s gets annoy ed writes script to automate win s
Automation systems available - Java ANT - BASH - RPM - Maven - Make #!/bin/bash # ALWAYS OVERWRITE MOST RECENT cat js/app.js > js/site.js # PLUGINS cat js/jQuery.js >> js/site.js cat js/someMinifiedPlugin.js >> js/site.js $ ./pack.sh http://mechanics.flite.com/blog/2012/06/19/why-we-use-node-dot-js-and-grunt-to-build-javascript/
Not all developer can write bash
New workflow for lazy developers
Is a package manager that installs, publishes and manages node programs written in javascript and runs under Node.js platform. Download and install Node.js from http://nodejs.org
Usage $ npm init $ npm info bower $ npm install ¨Cg bower $ npm install bower ¨Csave-dev $ npm update
package.json
Yeoman Modern workflow for modern web apps
Whats up Yo? http://yeoman.io/whyyeoman.html Yo scaffolds out a new application, from bootstraping grunt configuration and tasks, installs basic bower components and CSS Features: - Fast scaffolding - Generators for BackboneJS, EmberJS and AngularJS - Automatically compiles Coffeescripts & Compass - Killer package management using Bower - Run¡¯s headless browser unit testing using PhantomJS
Installing Yo and generators $ npm install ¨Cg yo $ npm install ¨Cg generator-angular $ npm install ¨Cg generator-webapp $ yo webapp $ yo angular
GRUNT The JavaScript Task Runner
Grunt is a way to automate operations and to performing repetitive tasks. Once you have done the configuration the less work you have to do when doing minification, compilation, deployment, unit testing, image optimisation and etc. Task Runner Features: - Unit Testing - Cache busting with revisions - CSS Compressor - JS Linting - Concatenation - Watch files for live reload - Uglify - Set up proxy server - Image Optimisation - Execute linux command - A lot more¡­..
Installing Grunt $ npm install grunt ¨Csave-dev $ npm install grunt-cli ¨Csave-dev
Gruntfile.json module.exports = function(grunt) { grunt.initConfig({ uglify: { dist: { src: 'dist/myfile.js', dest: 'dist/myfile.min.js' } } }); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.registerTask('default', ['uglify']); }; Sample minify with Grunt
$ gruntmytask will run all the targets of mytask $ gruntmytask:target will run the specific target of mytask $ gruntclean $ gruntsass:dev Executing Builds
- Bower is a package manager for the web. - Reads from a bower.json file - Handles dependencies! Installation $ sudo npm install -g bower $ bower init $ bower list $ bower search $ bower install bootstrap ¨Csave Bower
Bower.json { "dependencies": { "bootstrap": "~3.0.2" } } Composer does 2 things: 1) Downloads libraries and their dependencies. 2) Sets up autoloading so you don¡¯t need ¡°require¡± statements Bower only does number 1.
Thanks! Q uestions?

More Related Content

Front end task automation using grunt, yeoman and npm(1)

  • 1. Front-End Task Automation Friday, 25 October 13 with Grunt,Bower,Yeoman and NPM
  • 2. Agenda Overview: - What is automation - Reasons of automation - Old ways of workflow - Automation systems available Demonstration of NPM, Grunt, Yeoman and Bower: Application to Learning Management System:
  • 3. What is automation? - The term automation, inspired by the earlier word Automatic (coming from automaton), was not widely used before 1947, when General Motors established the automation department.[1] It was during this time that industry was rapidly adopting feedback controllers, which were introduced in the 1930s. - The technique, method, or system of operating or controlling a process by highly automatic means, as by electronic devices, reducing human intervention to a minimum. - Simply make the system work automatically.
  • 4. Reasons of automation? - Increase effectiveness, efficiency and coverage. - Decrease monotonous process which can lead to unexpected mistake. - Time saving translates to cost savings - Because developers are LAZY, and we¡¯d rather play pool while running the automation¡­.
  • 5. Old ways of workflow - Scaffolding - Convert PSD to sprite Gifs, Pngs or Jpgs - Create index.html - Download external vendors e.g jQuery, jQuery ui, angularJS, Bootstrap - Reference the vendors inside the ¡°href¡± - Open browser, test and do tweaks and reload browser It would be +1 if the dev is doing some compression or minify on CSS, Javascript or assets with YUI Compressor or UglifyJS. http://yui.github.io/yuicompressor/
  • 6. time spe nt task size non- geek gee k does it manually makes fun of geek¡¯s lose s gets annoy ed writes script to automate win s
  • 7. Automation systems available - Java ANT - BASH - RPM - Maven - Make #!/bin/bash # ALWAYS OVERWRITE MOST RECENT cat js/app.js > js/site.js # PLUGINS cat js/jQuery.js >> js/site.js cat js/someMinifiedPlugin.js >> js/site.js $ ./pack.sh http://mechanics.flite.com/blog/2012/06/19/why-we-use-node-dot-js-and-grunt-to-build-javascript/
  • 8. Not all developer can write bash
  • 9. New workflow for lazy developers
  • 10. Is a package manager that installs, publishes and manages node programs written in javascript and runs under Node.js platform. Download and install Node.js from http://nodejs.org
  • 11. Usage $ npm init $ npm info bower $ npm install ¨Cg bower $ npm install bower ¨Csave-dev $ npm update
  • 13. Yeoman Modern workflow for modern web apps
  • 14. Whats up Yo? http://yeoman.io/whyyeoman.html Yo scaffolds out a new application, from bootstraping grunt configuration and tasks, installs basic bower components and CSS Features: - Fast scaffolding - Generators for BackboneJS, EmberJS and AngularJS - Automatically compiles Coffeescripts & Compass - Killer package management using Bower - Run¡¯s headless browser unit testing using PhantomJS
  • 15. Installing Yo and generators $ npm install ¨Cg yo $ npm install ¨Cg generator-angular $ npm install ¨Cg generator-webapp $ yo webapp $ yo angular
  • 17. Grunt is a way to automate operations and to performing repetitive tasks. Once you have done the configuration the less work you have to do when doing minification, compilation, deployment, unit testing, image optimisation and etc. Task Runner Features: - Unit Testing - Cache busting with revisions - CSS Compressor - JS Linting - Concatenation - Watch files for live reload - Uglify - Set up proxy server - Image Optimisation - Execute linux command - A lot more¡­..
  • 18. Installing Grunt $ npm install grunt ¨Csave-dev $ npm install grunt-cli ¨Csave-dev
  • 19. Gruntfile.json module.exports = function(grunt) { grunt.initConfig({ uglify: { dist: { src: 'dist/myfile.js', dest: 'dist/myfile.min.js' } } }); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.registerTask('default', ['uglify']); }; Sample minify with Grunt
  • 20. $ gruntmytask will run all the targets of mytask $ gruntmytask:target will run the specific target of mytask $ gruntclean $ gruntsass:dev Executing Builds
  • 21. - Bower is a package manager for the web. - Reads from a bower.json file - Handles dependencies! Installation $ sudo npm install -g bower $ bower init $ bower list $ bower search $ bower install bootstrap ¨Csave Bower
  • 22. Bower.json { "dependencies": { "bootstrap": "~3.0.2" } } Composer does 2 things: 1) Downloads libraries and their dependencies. 2) Sets up autoloading so you don¡¯t need ¡°require¡± statements Bower only does number 1.