@sideroad 13೥6݄15೔౔༵೔

@sideroad Personal product Automatic Front end optimization tool Resolving dependencies library ( recipe.js ) Executing Selenium with html suite Grunt plugins ( testem, minset, feo, selenium, recipe JavaScript template engine jQuery plugins ( sidebar, floating message, text animation MVC Framework on jQuery UI Chrome extension ( URL Parameter scaffolding tool 13೥6݄15೔౔༵೔

Why use a task runner? Automation any things!! such as... minification concatenation compilation unit testing linting code metrics coverage doc less, sass 13೥6݄15೔౔༵೔

Before using grunt... 13೥6݄15೔౔༵೔

Install 1. prepare package.json onto project root 2.install with npm 13೥6݄15೔౔༵೔

Prepare Gruntfile.js 13೥6݄15೔౔༵೔

Build 13೥6݄15೔౔༵೔

Sample project: recipe.js https:/ /github.com/sideroad/recipe Tutorial 13೥6݄15೔౔༵೔

Watch task Execute Grunt task when scripts were changed 13೥6݄15೔౔༵೔

Chrome extension Execute grunt task from your chrome 13೥6݄15೔౔༵೔

Other plugins http:/ /gruntjs.com/plugins over 887 plugins 13೥6݄15೔౔༵೔

Grunt on CI Grunt on Jenkins http:/ /localhost:8080/job/recipe/ Grunt on Travis https:/ /travis-ci.org/sideroad/recipe 13೥6݄15೔౔༵೔

JavaScript Developer Making Production Component ( clean, concat, uglify, yui- compressor, copy ) Linter ( jshint ) Unit Test ( contrib-jasmine, contrib-mocha, contrib-qunit, nodeunit, testem ) Web Application Test ( selenium, browserstack ) Test Coverage ( qunit-cov, jasmine-coverage, mocha-cov ) Code Metrics ( plato ) Coffeescript ( coffee ) require.js ( requrejs ) 13೥6݄15೔౔༵೔

Web Designer CSS preprocessor ( compass, less, sass ) CSS sprite ( imagine ) Linter ( html, csslint ) Minification ( htmlmin, imagemin ) Livereload ( livereload ) FEO ( feo ) 13೥6݄15೔౔༵೔

Reference Grunt http:/ /gruntjs.com How to setup Grunt on Jenkins http:/ /sideroad.secret.jp/articles/ grunt-on-jenkins/ 13೥6݄15೔౔༵೔