Grunt All Day
-
Upload
douglasknudsen -
Category
Technology
-
view
182 -
download
1
description
Transcript of Grunt All Day
Grunt all day! …and some other stuff
Douglas Knudsen Universal Mind
please remember to fill out the surveys
me
twitter: douglasknudsen !
G+: douglasknudsen !
email: [email protected] !
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
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