Grunt all day! …and some other stuff

Douglas Knudsen Universal Mind

please remember to fill out the surveys

me

twitter: douglasknudsen !

G+: douglasknudsen !

email: douglasknudsen@gmail.com !

blog: http://www.cubicleman.com !

https://github.com/douglasknudsen

agenda

• why oh why

• enter Grunt!

• but first, some node

• and some npm

• onto grunt

• plugins galore

Karma!

why

we love for loops

but not when they involve us directly

why

along came ant

maven

xml config

make

nant

why

why not use JS?

why

enter grunt

configuration based on JS

what

grunt is a javascript task runner

workflow tool

what

based on nodejs

node

JS all up in your server!

evented I/O for the V8 JS engine

cylonjs, hummingbird, johnny-five, AWS, machine_learning

node

var net = require('net'); !

var server = net.createServer(function (socket) { socket.write('Echo server\r\n'); socket.pipe(socket); }); !

server.listen(1337, '127.0.0.1');

node

cross platform

http://nodejs.org/grab your binaries

node

many libraries exist, crazy community fever

nearly 90k packages. 23m dls a day

https://www.npmjs.org/

node : npm

enter npm

node package manager

comes with node

though its not really a acronym

node : npm

use npm to install libraries

npm install lodash

node : npm

libraries can be installed globally

or locally

npm install -g yo

npm install lodash

node : npm

node_modules

package.json

npm install grunt-contrib-copy --save-dev

npm : package.json

{ "name": "david-tucker-site", "version": "0.0.6", "author": "David Tucker", "description": "The Personal Blog of David Tucker at davidtucker.net", "devDependencies": { "browserify-shim": "~2.0.3", "grunt-contrib-jshint": "~0.4.3", "grunt-contrib-sass": "~0.3.0" } }

npm init

npm

add node_modules to .gitignore

you are using git are you not?

npm install

grunt

npm install -g grunt-cli

cd <yourProjectDir>

npm install grunt --save-dev

grunt

the grunt file

Gruntfile.js

grunt : gruntfilemodule.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), concat: { options: { separator: ';' }, dist: { src: ['src/**/*.js'], dest: 'dist/<%= pkg.name %>.js' } } }); grunt.loadNpmTasks(‘grunt-contrib-concat'); };

grunt : gruntfile

module.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json') }); };

wrapper

config

read

grunt : gruntfilecssmin: { production: { expand: true, cwd: 'css', src: ['*.css'], dest: 'css' }, dev: { expand: false, cwd: 'css', src: ['*.css'], dest: 'css' } }

task

target

grunt : gruntfile

grunt cssmin:dev

grunt : gruntfile

http://gruntjs.com/sample-gruntfile

npm install -g grunt-init

usage: grunt-init jquery

grunt

run multiple tasks sequentially

grunt.registerTask(‘workFlow’, [‘sass:dev’,’karma’,’copy’])

grunt : sass

grunt.loadNpmTasks('grunt-contrib-compass')

https://github.com/gruntjs/grunt-contrib-compass

compile sass to css using compass

grunt : cssmincompass: { dist: { options: { cssDir: ['<%= distdir %>/css'], sassDir: ['src/styles'], noLineComments: true, importPath: ['bower_components/bootstrap-sass-official'], force: true } }, dev: { options: { cssDir: ['<%= distdir %>/css'], sassDir: ['src/styles'], importPath: ['bower_components/bootstrap-sass-official'] } }

grunt : jshint

grunt.loadNpmTasks('grunt-contrib-jshint')

https://github.com/gruntjs/grunt-contrib-jshint

validate your js with jshint

grunt : jshint jshint:{ files:['gruntFile.js', '<%= src.js %>', '<%= src.jsTpl %>', '<%= src.specs %>', '<%= src.scenarios %>'], options:{ curly:true, eqeqeq:true, immed:true, latedef:true, newcap:true, noarg:true, sub:true, boss:true, eqnull:true, globals:{} } }

grunt : watch

grunt.loadNpmTasks('grunt-contrib-watch')

https://github.com/gruntjs/grunt-contrib-watch

run tasks when watched file patterns are modified

grunt : watchwatch:{ options: { livereload:true }, js: { files: ['<%= src.js %>'], tasks: ['js', 'timestamp'] }, css: { files: ['<%= src.sass %>'], tasks: ['css', 'timestamp'] }

grunt : tl;dr

• install node • npm install -g grunt-cli • cd /../your/project../ • npm init • npm install grunt --save-dev • touch Gruntfile.js • add tasks to Gruntfile.js • grunt!

grunt : tl;dr

TWO important files:

package.json

Gruntfile.js

grunt : other

yes folks, you can make maven grunt

yes folks, you can make nuget grunt

grunt : yo

scaffolding!

opinionated scaffolding!

yo

npm install -g yo

npm install -g generator-webapp

yo webapp

grunt serve

yo : webapp

• html5 boilerplate • twiiter bootstrap • sass • structure • build • jasmine • karma • phantomjs • dependencies via bower • …

yo : angular

npm install -g generator-angular

yo angular

yo angular:controller myController

yo angular:directive myDirective

yo

many many generators

• angular • jhipster • ember • backbone • meanstack • karma • symfony • foundation

yo

result

structure

dependencies

tools

yo

don’t see one you need?

don’t like the way a generator works?

my team has a different way!

role your own!

http://yeoman.io/authoring/

gulp

gulp is on the horizon

still kind of new

http://gulpjs.com/

code-over-configuration

resources• http://davidtucker.net/articles/automating-with-grunt • https://www.npmjs.org/ • http://www.slideshare.net/RahulNanwani/integrating-

grunt-and-bower-with-maven • https://www.npmjs.org/package/grunt-nuget • http://yeoman.io/ • http://gruntjs.com/ • https://github.com/angular-app/angular-app • http://joelhooks.com/ • http://cliffmeyers.com/ • http://livereload.com/ • https://egghead.io/technologies/grunt

ciao

thanks for dropping in!

be sure to fill out the survey