Grunt

Transcript

1. @sideroad 13೥6݄15೔౔༵೔
2. @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೔౔༵೔
3. 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೔౔༵೔
4. Before using grunt... 13೥6݄15೔౔༵೔
5. Install 1. prepare package.json onto project root 2.install with npm 13೥6݄15೔౔༵೔
6. Prepare Gruntfile.js 13೥6݄15೔౔༵೔
7. Build 13೥6݄15೔౔༵೔
8. Sample project: recipe.js https:/ /github.com/sideroad/recipe Tutorial 13೥6݄15೔౔༵೔
9. Watch task Execute Grunt task when scripts were changed 13೥6݄15೔౔༵೔
10. Chrome extension Execute grunt task from your chrome 13೥6݄15೔౔༵೔
11. Other plugins http:/ /gruntjs.com/plugins over 887 plugins 13೥6݄15೔౔༵೔
12. Grunt on CI Grunt on Jenkins http:/ /localhost:8080/job/recipe/ Grunt on Travis https:/ /travis-ci.org/sideroad/recipe 13೥6݄15೔౔༵೔
13. 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೔౔༵೔
14. Web Designer CSS preprocessor ( compass, less, sass ) CSS sprite ( imagine ) Linter ( html, csslint ) Minification ( htmlmin, imagemin ) Livereload ( livereload ) FEO ( feo ) 13೥6݄15೔౔༵೔
15. Reference Grunt http:/ /gruntjs.com How to setup Grunt on Jenkins http:/ /sideroad.secret.jp/articles/ grunt-on-jenkins/ 13೥6݄15೔౔༵೔