Grunt.js and Yeoman, Continous Integration

Grunt.js
The build tool for the web
for the web-experience

david.amend@it-amend.de

https://github.com/raDiesle/backbone.js-jquerymobile-boilerplate-template

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

Code

CI-Server

The process of
Cloud

Webserver
Developer

Developer
Business/
-Customer
Code

CI-Server

QA-Employee

Grunt.js

● node npm package

https://npmjs.org/browse/depended/grunt
http://benalman.com/news/2012/08/why-grunt/

Grunt.js

● 3700++ Watches on Github


Grunt.js

● 3700++ Watches on Github
● TestSwarm, modernizr, jQuery,
jQueryMobile


Basic Grunt.js tasks
● init
Generate project scaffolding from a predefined template

Create Standards with
Bootstrapping/ Templates

● concat
Concatenate files
● init
● lint
Validate files with JSHint
● min
Minify files with UglifyJS.

● init
● 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 - Ruby
def uglify(script_file)
output = `uglifyjs #{script_file}`

#Did it work?
if !$?.success?
puts "Uglify Failed"
Process.abort
end

output
end

Grunt.js
grunt.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: JavaScript
grunt.initConfig({
min: {
dist: {
src: ['dist/built.js'],
dest: 'dist/built.min.js'
}
}
});


JavaScript for everyone
"...even our I’d-rather-not-
touch-JavaScript-even-with-a-
very-long-stick
backend developers,
speak some JavaScript."


Balance of extendability

Declarative Scripting
Configuration Approach

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 Tasks
grunt.registerMultiTask(
taskName, description, taskFunction
);

Enriching Tasks
grunt.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
● ...

Grunt.js and Yeoman, Continous Integration

Yeoman
Yeoman 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 convention
Forcing
to best practices
CommonJS Module

http://dl.dropbox.com/u/39519/talks/io-tooling/index.html#21

Sharing best practices

"I love the backbone
boilerplate!"

Tony Juli 1, 2012 at 1:25 am

Any Questions ?
● Against Grunt.js as a build system
http://blog.millermedeiros.com/node-js-ant-grunt-and-other-build-tools/

● Reply : Why Grunt.js

david.amend@it-amend.de

Articles
Google IO, Better web app development
through tooling
http://dl.dropbox.com/u/39519/talks/io-tooling/index.html#21

Blog about last commit comments
http://www.commitlogsfromlastnight.com/

Grunt-modernizr, builder which runs in TravisCI
https://github.com/doctyper/grunt-modernizr

Continous Integration in general
http://www.slideshare.net/bhavinjavia/continuous-integration-and-builds

Example of grunt usage

Goals
● Create a baseline for developers
● Improve existing solutions
● Share knownledge

Email me: David.Amend@it-amend.de

http://incident57.com/codekit/

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 rules
Grunt 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 tools
ant, maven (Java)
nant (.NET)
make ( C++)
rake / Caphistrano

http://www.commitlogsfromlastnight.com

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
applying
the traditional practice of
quality control after
completing all development.

The process of

Developer

Developer
Business/
-Customer
Code

CI-Webserver

QA-Employee


● clean - compile - test - package
● Continous Delivery
● Metrics
● Saving time
http://www.slideshare.net/bhavinjavia/continuous-integration-and-builds
https://github.com/codedance/Retaliation
http://www.cuberick.com/2008/10/continuous-int

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-Adapter https://github.com/millermedeiros/node-ant


Grunt.js and Yeoman, Continous Integration

More Related Content

What's hot (20)

Similar to Grunt.js and Yeoman, Continous Integration (20)

More from David Amend (14)

Grunt.js and Yeoman, Continous Integration