63
Grunt.js The build tool for the web for the web-experience [email protected]

Grunt.js and Yeoman, Continous Integration

Embed Size (px)

DESCRIPTION

A presentation about the build tool grunt js JavaScript for web applications and node.js environments to achieve continous integration. David Amend

Citation preview

Page 1: Grunt.js and Yeoman, Continous Integration

Grunt.jsThe build tool for the webfor the web-experience

[email protected]

Page 2: Grunt.js and Yeoman, Continous Integration

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

Page 3: Grunt.js and Yeoman, Continous Integration

Technical Background

Page 4: Grunt.js and Yeoman, Continous Integration

Content

● Why a build tool is needed for CI ?● Why Grunt.js ?● Demo● Why Yeoman perfects Grunt.js

Page 5: Grunt.js and Yeoman, Continous Integration

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.

Page 6: Grunt.js and Yeoman, Continous Integration

The process of Continous Integration

Developer

CI-Server

Code

Page 7: Grunt.js and Yeoman, Continous Integration

The process of Continous Integration

Developer

CI-Server

QA-Employee

Developer

Business/-CustomerCode

Cloud

Webserver

Page 8: Grunt.js and Yeoman, Continous Integration

The process of Continous Integration

Developer

CI-Server

QA-Employee

Developer

Business/-CustomerCode

Cloud

Webserver

Page 9: Grunt.js and Yeoman, Continous Integration

Grunt.js

● node npm package

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

Page 10: Grunt.js and Yeoman, Continous Integration

Grunt.js

● node npm package● 3700++ Watches on Github

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

Page 11: Grunt.js and Yeoman, Continous Integration

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/

Page 12: Grunt.js and Yeoman, Continous Integration

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/

Page 13: Grunt.js and Yeoman, Continous Integration

Basic Grunt.js tasks● init

Generate project scaffolding from a predefined template

Page 14: Grunt.js and Yeoman, Continous Integration

Create Standards with Bootstrapping/ Templates

Page 15: Grunt.js and Yeoman, Continous Integration

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.

Page 16: Grunt.js and Yeoman, Continous Integration

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

Page 17: Grunt.js and Yeoman, Continous Integration

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>

Page 18: Grunt.js and Yeoman, Continous Integration

Rake - Rubydef uglify(script_file) output = `uglifyjs #{script_file}`

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

outputend

Page 19: Grunt.js and Yeoman, Continous Integration

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/

Page 20: Grunt.js and Yeoman, Continous Integration

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/

Page 21: Grunt.js and Yeoman, Continous Integration

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/

Page 22: Grunt.js and Yeoman, Continous Integration

Balance of extendability

Declarative Configuration

Scripting Approach

Page 23: Grunt.js and Yeoman, Continous Integration

Build tool for the Web

Page 24: Grunt.js and Yeoman, Continous Integration

Concepts of managing tasks

Grunt.js file:

● grunt.loadNpmTasks('grunt-sample');● grunt.loadTasks(tasksPath)● grunt.loadTasks('tasks');● grunt.registerTask('default', 'lint qunit concat

min');

Page 25: Grunt.js and Yeoman, Continous Integration

Enriching Tasksgrunt.registerMultiTask( taskName, description, taskFunction);

Page 26: Grunt.js and Yeoman, Continous Integration

Enriching Tasksgrunt.registerHelper("helloWorld", function(){

return "Hi you!!!";})

grunt.helper('helloWorld');

Page 27: Grunt.js and Yeoman, Continous Integration

Async-Support

var done = this.async; // tell grunt to do task async

setTimeout(function(){ var isSuccessful = Math.random() > 0.5; done(isSuccessful);}

Page 28: Grunt.js and Yeoman, Continous Integration

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');

Page 29: Grunt.js and Yeoman, Continous Integration

Utils & Variables & more

● Warn, Error, Fatal● grunt.utils._, grunt.utils.hooker● grunt.task.current.file ● ...

Page 30: Grunt.js and Yeoman, Continous Integration

Demo #1

Page 31: Grunt.js and Yeoman, Continous Integration
Page 32: Grunt.js and Yeoman, Continous Integration

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 ...

Page 33: Grunt.js and Yeoman, Continous Integration

Yeoman builds on top of Grunt.js

● package management like apt-get

Page 34: Grunt.js and Yeoman, Continous Integration

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

Page 35: Grunt.js and Yeoman, Continous Integration

"I love the backbone boilerplate!"

Tony Juli 1, 2012 at 1:25 am

Sharing best practices

Page 36: Grunt.js and Yeoman, Continous Integration

Demo #2

Page 37: Grunt.js and Yeoman, Continous Integration

My seamless workflow

Page 38: Grunt.js and Yeoman, Continous Integration

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/

[email protected]

Page 39: Grunt.js and Yeoman, Continous Integration

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/

Page 40: Grunt.js and Yeoman, Continous Integration

Additional Slides

Page 41: Grunt.js and Yeoman, Continous Integration
Page 42: Grunt.js and Yeoman, Continous Integration

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

Email me: [email protected]

Page 43: Grunt.js and Yeoman, Continous Integration

You are different !

Page 44: Grunt.js and Yeoman, Continous Integration

You are different !

Page 45: Grunt.js and Yeoman, Continous Integration

http://incident57.com/codekit/

Page 46: Grunt.js and Yeoman, Continous Integration

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/

Page 48: Grunt.js and Yeoman, Continous Integration

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.

Page 49: Grunt.js and Yeoman, Continous Integration

Build toolsant, maven (Java)nant (.NET)make ( C++)rake / Caphistrano

Page 51: Grunt.js and Yeoman, Continous Integration

More responsibility

Page 52: Grunt.js and Yeoman, Continous Integration
Page 53: Grunt.js and Yeoman, Continous Integration

Fun @ work

Page 54: Grunt.js and Yeoman, Continous Integration
Page 55: Grunt.js and Yeoman, Continous Integration

ant, maven (Java); nant (.NET) make ( C++) rake / Caphistrano node: buildr.npm Smoosh Gear.js Rivet Roto

Page 56: Grunt.js and Yeoman, Continous Integration

ant, maven (Java); nant (.NET) make ( C++) rake / Caphistrano node: buildr.npm Smoosh Gear.js Rivet Roto

Page 57: Grunt.js and Yeoman, Continous Integration

Seamless Integration

● Anonymous metrics report to Google Analytics

Page 58: Grunt.js and Yeoman, Continous Integration

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/

Page 59: Grunt.js and Yeoman, Continous Integration

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.

Page 60: Grunt.js and Yeoman, Continous Integration

The process of Continous Integration

Developer

CI-Webserver

QA-Employee

Developer

Business/-CustomerCode

Page 61: Grunt.js and Yeoman, Continous Integration

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

Page 62: Grunt.js and Yeoman, Continous Integration

Grunt-Contrib tasks● bump● clean● coffee ● compress● copy● JST + Jade + Handlebars● Mincss, Less, Stylus ● Require.js● Yuidoc

Page 63: Grunt.js and Yeoman, Continous Integration

... 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