Grunt.jsThe build tool for the webfor the web-experience
https://github.com/raDiesle/backbone.js-jquerymobile-boilerplate-template
Technical Background
Content
● Why a build tool is needed for CI ?● Why Grunt.js ?● Demo● Why Yeoman perfects Grunt.js
Supports Development
Continuous integration aims to improve the quality of software, and to reduce the time taken to deliver it, by replacing the traditional practice of
applying quality control after completing all development.
The process of Continous Integration
Developer
CI-Server
Code
The process of Continous Integration
Developer
CI-Server
QA-Employee
Developer
Business/-CustomerCode
Cloud
Webserver
The process of Continous Integration
Developer
CI-Server
QA-Employee
Developer
Business/-CustomerCode
Cloud
Webserver
Grunt.js
● node npm package
https://npmjs.org/browse/depended/grunthttp://benalman.com/news/2012/08/why-grunt/
Grunt.js
● node npm package● 3700++ Watches on Github
https://npmjs.org/browse/depended/grunthttp://benalman.com/news/2012/08/why-grunt/
Grunt.js
● node npm package● 3700++ Watches on Github● TestSwarm, modernizr, jQuery,
jQueryMobile
https://npmjs.org/browse/depended/grunthttp://benalman.com/news/2012/08/why-grunt/
Grunt.js
● node npm package● 3700++ Watches on Github● TestSwarm, modernizr, jQuery,
jQueryMobile
https://npmjs.org/browse/depended/grunthttp://benalman.com/news/2012/08/why-grunt/
Basic Grunt.js tasks● init
Generate project scaffolding from a predefined template
Create Standards with Bootstrapping/ Templates
Basic Grunt.js tasks● concat
Concatenate files● init
Generate project scaffolding from a predefined template● lint
Validate files with JSHint● min
Minify files with UglifyJS.
Basic Grunt.js tasks● init
Generate project scaffolding from a predefined template● lint
Validate files with JSHint● min
Minify files with UglifyJS.● server
Start a static node web server● test
Run unit tests with nodeunit. (Jasmine support)● qunit
Run QUnit unit tests in a headless PhantomJS instance.● watch
Run predefined tasks whenever watched files change.● concat
Concatenate files
Ant<target name="js-compile-all" description="What does it do?" unless="skip-js-compile"> <echo>Executing my JS files in ${input.scripts.dir} ...</echo> <apply executable="java" dest="${output.scripts.dir}"> <arg value="-jar"/> <arg path="${jar.lib.dir}/closure-compiler.jar"/> <arg lmaxine="--js"/> <srcfile/> <arg line="--js_output_file"/> <targetfile/> <fileset dir="${output.scripts.dir}" includes="**/*-main.debug.js"/> <mapper type="glob" from="*-main.debug.js" to="*-main.min.js"/> </apply> <echo>Finished manipulating mx JS files</echo></target>
Rake - Rubydef uglify(script_file) output = `uglifyjs #{script_file}`
#Did it work? if !$?.success? puts "Uglify Failed" Process.abort end
outputend
Grunt.jsgrunt.initConfig({ min: { dist: { src: ['dist/built.js'], dest: 'dist/built.min.js' } }});
http://mechanics.flite.com/blog/2012/06/19/why-we-use-node-dot-js-and-grunt-to-build-javascript/
Easiest Syntax: JavaScriptgrunt.initConfig({ min: { dist: { src: ['dist/built.js'], dest: 'dist/built.min.js' } }});
http://mechanics.flite.com/blog/2012/06/19/why-we-use-node-dot-js-and-grunt-to-build-javascript/
JavaScript for everyone"...even our I’d-rather-not-touch-JavaScript-even-with-a-very-long-stick backend developers, speak some JavaScript."
http://mechanics.flite.com/blog/2012/06/19/why-we-use-node-dot-js-and-grunt-to-build-javascript/
Balance of extendability
Declarative Configuration
Scripting Approach
Build tool for the Web
Concepts of managing tasks
Grunt.js file:
● grunt.loadNpmTasks('grunt-sample');● grunt.loadTasks(tasksPath)● grunt.loadTasks('tasks');● grunt.registerTask('default', 'lint qunit concat
min');
Enriching Tasksgrunt.registerMultiTask( taskName, description, taskFunction);
Enriching Tasksgrunt.registerHelper("helloWorld", function(){
return "Hi you!!!";})
grunt.helper('helloWorld');
Async-Support
var done = this.async; // tell grunt to do task async
setTimeout(function(){ var isSuccessful = Math.random() > 0.5; done(isSuccessful);}
Async-Support
var done = this.async; // tell grunt to do task async
setTimeout(function(){ var isSuccessful = Math.random() > 0.5; done(isSuccessful);}
this.requires('random');
Utils & Variables & more
● Warn, Error, Fatal● grunt.utils._, grunt.utils.hooker● grunt.task.current.file ● ...
Demo #1
YeomanYeoman is a robust and opinionated
set of tools, libraries and a workflow that can help developers to build beautiful, compelling web apps.
@By Paul Irish, Addy Osmani, Sindre Sorhus, Mickael Daniel, Eric Bidelman ...
Yeoman builds on top of Grunt.js
● package management like apt-get
DRY (Don't repeat yourself)● Scaffolding & Prototyping
Coding by conventionForcing to best practicesCommonJS Module
http://dl.dropbox.com/u/39519/talks/io-tooling/index.html#21
"I love the backbone boilerplate!"
Tony Juli 1, 2012 at 1:25 am
Sharing best practices
Demo #2
My seamless workflow
Any Questions ?● Against Grunt.js as a build system
http://blog.millermedeiros.com/node-js-ant-grunt-and-other-build-tools/
● Reply : Why Grunt.jshttp://benalman.com/news/2012/08/why-grunt/
ArticlesGoogle IO, Better web app development through toolinghttp://dl.dropbox.com/u/39519/talks/io-tooling/index.html#21
Blog about last commit commentshttp://www.commitlogsfromlastnight.com/
Grunt-modernizr, builder which runs in TravisCIhttps://github.com/doctyper/grunt-modernizr
Continous Integration in generalhttp://www.slideshare.net/bhavinjavia/continuous-integration-and-builds
Example of grunt usagehttp://mechanics.flite.com/blog/2012/06/19/why-we-use-node-dot-js-and-grunt-to-build-javascript/
Additional Slides
Goals● Create a baseline for developers● Improve existing solutions● Share knownledge
Email me: [email protected]
You are different !
You are different !
Tools to unify development"I wrote a README the other day for a project ... and as I was writing it, I realized that it was the sort of thing that might have intimidated the hell out of me a couple of years ago, what with its casual mentions of Node, npm, Homebrew, git, tests, and development and production builds."...Many members of the community – myself included – lacked traditional programming experience. HTML, CSS, and JavaScript – usually in the form of jQuery – were self-taught skills....here’s a new set of baseline skills required in order to be successful as a front-end developer, and developers who don’t meet this baseline are going to start feeling more and more left behind as those who are sharing their knowledge start to assume that certain things go without saying. by Rebecca Murphy (+Paul Irish, Mike Taylor, Angus Croll, and Vlad Filippov)
http://rmurphey.com/blog/2012/04/12/a-baseline-for-front-end-developers/
http://jamesonjavascript.wordpress.com/2012/04/10/state-of-the-art/
Community rulesGrunt uses async for asynchronous function queue processing, dateformat for formatting dates and temporary for creating temporary files.But on the other hand, I wanted synchronous globbing, and the excellent glob was async-only at the time… so I wrote my own. I even called it glob-whatev so that people wouldn’t take it too seriously. Of course, I’d love to switch to glob now that it supports synchronous globbing, but there’s at least one issue that’s blocking me from using it.
Build toolsant, maven (Java)nant (.NET)make ( C++)rake / Caphistrano
http://www.commitlogsfromlastnight.com
More responsibility
Fun @ work
ant, maven (Java); nant (.NET) make ( C++) rake / Caphistrano node: buildr.npm Smoosh Gear.js Rivet Roto
ant, maven (Java); nant (.NET) make ( C++) rake / Caphistrano node: buildr.npm Smoosh Gear.js Rivet Roto
Seamless Integration
● Anonymous metrics report to Google Analytics
XXX aims to improve the
quality of software, and to
reduce the time taken to deliver it, by
replacing the traditional practice of applying quality control after completing all development.
http://en.wikipedia.org/
XXX aims to improve the quality of software, and to reduce the time taken to deliver it, by replacing
the traditional practice of applying quality control after completing all development.
The process of Continous Integration
Developer
CI-Webserver
QA-Employee
Developer
Business/-CustomerCode
Continous Integration
● clean - compile - test - package● Continous Delivery● Metrics● Saving time
http://www.slideshare.net/bhavinjavia/continuous-integration-and-buildshttps://github.com/codedance/Retaliationhttp://www.cuberick.com/2008/10/continuous-integration.html
Grunt-Contrib tasks● bump● clean● coffee ● compress● copy● JST + Jade + Handlebars● Mincss, Less, Stylus ● Require.js● Yuidoc
... as well as:● Confess
Generate Cache Manifest
● GrundIcon, OptiPNG & jpegtran ● Sass & Compass● JsTestDriver● Ant-Adapterhttps://github.com/millermedeiros/node-ant
https://npmjs.org/browse/depended/grunt
Top Related