Assets Build Automation

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

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
97
0f59545fe4b3d43c7e98710b0c17af9f?s=48 marconi
4
970
0f59545fe4b3d43c7e98710b0c17af9f?s=48 marconi
10
890
0f59545fe4b3d43c7e98710b0c17af9f?s=48 marconi
3
360
0f59545fe4b3d43c7e98710b0c17af9f?s=48 marconi
1
65

Other Decks in Programming

See All in Programming
9af444e4e7110845f0b3319efb1ca252?s=48 920oj
1
670
Db8efd836c9a09b71e3d8e1c60d6ea84?s=48 colinfay
0
130
826c34bb94d4fe786230bd95c5bdc409?s=48 fornewid
1
280
4d78b749c315e21a956053dcbf0508a9?s=48 po3rin
1
130
F54b73a93fb75a12fa6c28b26ca0bb62?s=48 kawakawaryuryu
0
110
D83b3739651001461f48763639b90b50?s=48 mazipan
4
930
1b863be3048c82d20ea84abcce33dc36?s=48 schktjm
0
160
5c097a7b75c8802b073774faa7276503?s=48 optim
4
320
0fb2ce77513181750c384115cd0bc937?s=48 ksukenobe
0
130
29bfc9e2bc82b775a30af70be3196386?s=48 hannaprinz
0
100
D12a80cab206033a820ccff8319f957b?s=48 s_uryu
4
1.5k
5701f31a8433a22ae736282de8d08cd6?s=48 handstandsam
5
4k

Featured

See All Featured
C86443373fbfe92996aa882d0d7a59f8?s=48 imathis
477
150k
433acaea1012b25d97ae66da9b998dad?s=48 malarkey
391
60k
3d6ace9554821d552146413bcdf874f6?s=48 trishagee
5
380
5f50f94346fbcb23706f0707169317a4?s=48 aarron
253
36k
Aff5641764408271f7bc398f2097edd0?s=48 denniskardys
218
110k
A0517b08532aec8ab2aae3f65d40ad86?s=48 hannesfritz
26
850
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
1348
190k
25c7c18223fb42a4c6ae1c8db6f50f9b?s=48 mojombo
353
62k
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
8
930
E14f55d3f939977cecbf51b64ff6f861?s=48 keithpitt
398
20k
E837d2996f52008ace055a08fbfff992?s=48 frogandcode
121
20k
9cde37f47e4a800ea081ea42de8d749a?s=48 dougneiner
55
5.3k

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