Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Assets Build Automation

0f59545fe4b3d43c7e98710b0c17af9f?s=47 Marconi Moreto
February 25, 2014
Programming
2
260

Assets Build Automation

Automated building of your webapp assets using Gruntjs.

0f59545fe4b3d43c7e98710b0c17af9f?s=128

Marconi Moreto

February 25, 2014
Tweet

More Decks by Marconi Moreto

See All by Marconi Moreto
0f59545fe4b3d43c7e98710b0c17af9f?s=48 marconi
1
100
0f59545fe4b3d43c7e98710b0c17af9f?s=48 marconi
4
980
0f59545fe4b3d43c7e98710b0c17af9f?s=48 marconi
10
930
0f59545fe4b3d43c7e98710b0c17af9f?s=48 marconi
3
370
0f59545fe4b3d43c7e98710b0c17af9f?s=48 marconi
1
69

Other Decks in Programming

See All in Programming
E66449b8260b07a1cf51c5ab5eaa8180?s=48 dunglas
1
3.3k
A4d1023b1de7890c67a083d14573882d?s=48 ktgrstsh
1
230
36751965e79dca4618cccc3c08efc912?s=48 leichteckig
0
140
249b3122eee454c0a818bfe7851418e4?s=48 fromkk
1
320
A45681c58220b58ca83a926b1be52e65?s=48 moriatsushi
1
2.2k
13824f545937c1ae0a80739aea2e396c?s=48 mlopskr
0
300
52cc8a838bf44a589d2572833b2dd1b9?s=48 palkan
1
1.1k
2e8ff55bf441ac3101a36812010216c2?s=48 medup
0
120
1fab9d01b25e99522f3dfd01e3d4cb51?s=48 soutaro
3
580
744f1c2c6cbea2ff5104b0ac512936bd?s=48 hpgrahsl
0
150
Bfc42a2fb137897db919bac632c83085?s=48 teruhisafukumoto
1
320
15934fa2aa7b2ce21f091e9b7cffa856?s=48 manfredsteyer
PRO
0
150

Featured

See All Featured
245cee81a9c424266e5e401d844ea881?s=48 lara
591
61k
A9a491b0fcbe0fbce3d64063a37add99?s=48 rmw
13
940
1b8ad785acdd1ce1c99914b1c2a4e10e?s=48 sugarenia
233
910k
2bb923c57a1fdc3a2eb484bb8d565fd2?s=48 ufuk
58
5.5k
027d1ebf66cc039a0bd3b55eeadbe75d?s=48 sachag
446
36k
Eb8975af8e49e19e3dd6b6b84a542e26?s=48 qrush
285
19k
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
392
61k
282d599b414022eba5096510f675b6e2?s=48 chrislema
173
14k
78b475797a14c84799063c7cd073962f?s=48 holman
448
140k
A60068bce2e73de3a37ca9d2dbe36092?s=48 bryan
33
3.6k
053e75a5b48b44d6dd0612795dfb326d?s=48 notwaldorf
35
2.4k
462dad0dd24c568a32dcdb0ae895ae1b?s=48 rasmusluckow
318
19k

Transcript

  1. Assets Build Automation Marconi Moreto @marconimjr

  2. Story time...

  3. Classic way: <!doctype html> <html> <head> <title>My Awesome WebApp</title> <link

    href="/static/css/somegrid.css" type="text/css" rel="stylesheet"/> <link href="/static/css/plugins.css" type="text/css" rel="stylesheet"/> <link href="/static/css/styles.css" type="text/css" rel="stylesheet"/> </head> <body> ... <script src="/static/js/jquery.js" type="text/javascript"></script> <script src="/static/js/plugins.js" type="text/javascript"></script> <script src="/static/js/app.js" type="text/javascript"></script> </body> </html> Number of requests: 7
  4. None

  5. Concatenate everything: <!doctype html> <html> <head> <title>My Awesome WebApp</title> <link

    href="/static/css/app.css" type="text/css" rel="stylesheet"/> </head> <body> ... <script src="/static/js/app.js" type="text/javascript"></script> </body> </html> Number of requests: 3

  6. Quick peak 1/2 body { padding: 0; margin: 0; }

    #notification { width: 100%; font-size: 18px; text-align: center; padding: 15px 0; } #notification.success { background: #1abc9c; } #notification.error { background: #e74c3c; } app.css app.js /** * Basic notification class */ function Notification(msg, type) { this.msg = msg; this.type = typeof type !== 'undefined' ? type : 'success'; } Notification.prototype.show = function() { // build notification var notif = document.createElement('div'); notif.id = 'notification'; notif.className = this.type; notif.innerHTML = this.msg; // prepend notificaiton var doc = document.getElementsByTagName("body")[0]; doc.insertBefore(notif, doc.firstChild); }; $(function() { new Notification("Welcome!").show(); })(); Size: 277 bytes Size: 543 bytes
  7. None

  8. Minify everything: <!doctype html> <html> <head> <title>My Awesome WebApp</title> <link

    href="/static/css/app.min.css" type="text/css" rel="stylesheet"/> </head> <body> ... <script src="/static/js/app.min.js" type="text/javascript"></script> </body> </html> ✓ Number of requests: 3 ✓ Faster loading time

  9. Quick peak 2/2 body{padding:0;margin:0} #notification{width: 100%;font-size:18px;text- align:center;padding:15px 0} #notification.success{backg round:#1abc9c}

    #notification.error{backgro und:#e74c3c} app.min.css app.min.js function Notification(a,b){this.msg=a,this.type="undefined"! =typeof b?b:"success"}Notification.prototype.show=function() {var a=document.createElement("div");a.id="notification",a.classNam e=this.type,a.innerHTML=this.msg;var b=document.getElementsByTagName("body") [0];b.insertBefore(a,b.firstChild)},$(function(){new Notification("Welcome!").show()})(); Size: 277 bytes Size: 177 bytes Size: 543 bytes Size: 352 bytes
  10. None

  11. Why do all these?

  12. None
  13. None
  14. None

  15. But why do we automate?

  16. None

  17. But really, why do we automate?

  18. Focus on fun stuff!

  19. The JavaScript Task Runner

  20. ✓ Node ✓ JS/Coffee + JSON ✓ Focus on web

    development ✓ Over 2,294 plugins! Things to love about Grunt:
  21. None

  22. Who’s using it? And some more: Wordpress, Opera, etc.

  23. $ npm install -g grunt-cli - package.json - Gruntfile.(js|coffee) Getting

    started: Installation: Requirements:

  24. { "name": "MyAwesomeApp", "version": "0.0.1", "private": true } package.json $

    npm install grunt --save $ npm install grunt-contrib-uglify --save $ npm install grunt-contrib-cssmin --save ... $ cat package.json { "name": "MyAwesomeApp", "version": "0.0.1", "private": true, "dependencies": { "grunt": "~0.4.2", "grunt-contrib-uglify": "~0.3.2", "grunt-contrib-cssmin": "~0.8.0" } } Install dependencies:

  25. CSS Minification

  26. module.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), cssmin: { styles:

    { files: { 'static/css/app.min.css': ['src/css/*.css'] } } } }); grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.registerTask('default', ['cssmin']); }; Gruntfile.js Lets run it! $ grunt

  27. JS Minification

  28. module.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), cssmin: { styles:

    { files: { 'static/css/app.min.css': ['src/css/*.css'] } } }, uglify: { scripts: { files: { 'static/js/app.min.js': [ 'src/js/jquery.js', 'src/js/plugins.js', 'src/js/app.js' ] } } } }); grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.registerTask('default', ['cssmin']); grunt.registerTask('deploy', ['cssmin', 'uglify']); }; Gruntfile.js: Lets run it! $ grunt deploy

  29. Concatenate on development + minify on deploy

  30. module.exports = function(grunt) { grunt.initConfig({ ... concat: { dist: {

    src: ['src/js/**/*.js'], dest: 'static/js/app.all.js' } }, uglify: { scripts: { files: { 'static/js/app.min.js': ['static/js/app.all.js'] } } } }); ... grunt.loadNpmTasks('grunt-contrib-concat'); grunt.registerTask('default', ['cssmin', 'concat']); grunt.registerTask('deploy', ['cssmin', 'concat', 'uglify']); }; Gruntfile.js: Lets run it! $ grunt deploy Install plugin: $ npm install grunt-contrib-concat --save

  31. What about SASS? Updated project structure: $ tree . .

    ├── public │ └── index.html ├── src │ ├── Gruntfile.js │ ├── js │ │ ├── jquery.js │ │ ├── app.js │ │ └── plugins.js │ ├── package.json │ └── sass │ ├── _plugins.scss │ └── app.scss └── static ├── css │ └── app.min.css └── js ├── app.all.js └── app.min.js #notification { width: 100%; font-size: 18px; text-align: center; padding: 15px 0; &.success { background: #1abc9c; } &.error { background: #e74c3c; } } _plugins.scss body { padding: 0; margin: 0; } @import "plugins"; app.scss

  32. module.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), sass: { dist:

    { options: { outputStyle: 'compressed' }, files: { '../static/css/app.min.css': 'sass/app.scss' } } }, concat: { ... }, uglify: { ... } }); grunt.loadNpmTasks('grunt-sass'); grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.registerTask('default', ['sass', 'concat']); grunt.registerTask('deploy', ['sass', 'concat', 'uglify']); }; Gruntfile.js: Install plugin: $ npm install grunt-sass --save

  33. Watching files

  34. module.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), ... watch: {

    sass: { files: ['sass/**/*.scss'], tasks: ['sass'] }, concat: { files: ['js/**/*.js'], tasks: ['concat'] }, uglify: { files: ['../static/js/app.all.js'], tasks: ['uglify'] } } }); ... grunt.loadNpmTasks("grunt-contrib-watch"); ... }; Gruntfile.js: Install plugin: $ npm install grunt-contrib-watch --save Watch changes: $ grunt watch

  35. <!doctype html> <html> <head> <title>My Awesome WebApp</title> <link href="/static/css/app.min.css" type="text/css"

    rel="stylesheet"/> </head> <body> ... <script src="/static/js/app.min.js" type="text/javascript"></script> </body> </html> index.html
  36. None
  37. None

  38. body { padding: 0; margin: 0; } #left, #right {

    width: 290px; height: 315px; float: left; margin-right: 10px; } #left { background: url('../images/left.jpg') no-repeat top left; } #right { background: url('../images/right.jpg') no-repeat top left; } @import "plugins"; app.scss

  39. <!doctype html> <html> <head> <title>My Awesome WebApp</title> <link href="/static/css/app.min.css" type="text/css"

    rel="stylesheet"/> </head> <body> ... <script src="/static/js/app.min.js" type="text/javascript"></script> </body> </html> index.html Number of requests: 5

  40. module.exports = function(grunt) { grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), sass: { ...

    }, imageEmbed: { dist: { src: ['../static/css/app.min.css'], dest: '../static/css/app.min.css', options: {deleteAfterEncoding : false} } }, ... watch: { sass: { files: ['sass/**/*.scss'], tasks: ['sass', 'imageEmbed'] }, ... } }); grunt.loadNpmTasks("grunt-contrib-watch"); grunt.loadNpmTasks("grunt-image-embed"); grunt.registerTask('default', ['sass', 'imageEmbed', 'concat']); grunt.registerTask('deploy', ['sass', 'imageEmbed', 'concat', 'uglify']); }; Gruntfile.js: Install plugin: $ npm install grunt-image-embed --save

  41. Number of requests: 3

  42. OMG!

  43. Thank you Marconi Moreto @marconimjr http://marconijr.com https://github.com/marconi