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
270

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
1k
0f59545fe4b3d43c7e98710b0c17af9f?s=48 marconi
10
950
0f59545fe4b3d43c7e98710b0c17af9f?s=48 marconi
3
370
0f59545fe4b3d43c7e98710b0c17af9f?s=48 marconi
1
73

Other Decks in Programming

See All in Programming
646a01801bac1886ddf86aee2de913ed?s=48 miyukki
0
130
Ae276805027a01983503c3edafbdb6b2?s=48 martysuzuki
5
590
A45d7e872a00eb4478c45fa0f7595a3d?s=48 rilmayer
3
800
9f2edd3fb2cc8feb20221138ca91d9fc?s=48 kuriko
0
270
Fb8392642d939c918bf61fc6d8094409?s=48 misawasan
0
1.6k
F9d1e7c494103e9ad73723d4496334f9?s=48 mattdclarke
0
190
13fb4600e942b31c69cfeaf4768c36cc?s=48 takazudo
7
730
0c217b9a7dd0aa31ed40bd0f453727e1?s=48 ramsey
PRO
1
240
9f2edd3fb2cc8feb20221138ca91d9fc?s=48 kuriko
0
270
8ec2b967e38f000eb63ae345cd7c58e6?s=48 minodriven
5
3.7k
C400a6dc29b681f0284fd33c468e396e?s=48 shimotaroo
0
140
E0e036f89c14b3e59640318eedf9670b?s=48 bkuhlmann
0
230

Featured

See All Featured
C51b39fa3c79ccb99dcb8a076bc98287?s=48 brianwarren
88
5.4k
Be9caeb9d4ef9944d151af909063ed6e?s=48 samlambert
238
10k
7edec06b5435e0dac07a353b2cc26253?s=48 geeforr
337
30k
Eb8975af8e49e19e3dd6b6b84a542e26?s=48 qrush
288
19k
1519587b1a0febb658c36c94f6272b0d?s=48 roundedbygravity
85
8.3k
9cde37f47e4a800ea081ea42de8d749a?s=48 dougneiner
123
8.3k
7c8469ee8c9e594c65c59b919626c08d?s=48 scottboms
253
11k
5ce91fa49a613cbc3e20d5f96856473f?s=48 edds
60
9.7k
C1daf20e5c49ff910745198ef9869ac2?s=48 hatefulcrawdad
259
17k
C4de88ea47538e4594750e3861a341c8?s=48 brettharned
97
4k
0bce06bd06ee7a2c4f5500f25dcf7f18?s=48 paulrobertlloyd
74
1.8k
719435d98d452de7ac367c828266cf01?s=48 erikaheidi
30
5.4k

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