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

Esse cara é o grunt

Almir Filho
December 14, 2013

Esse cara é o grunt

♫ O cara que observa seus arquivos toda hora
O cara que te avisa quando você quebra o build
O cara que faz o reload por você
O cara que após o save, te chama
Pra dizer se o teste passou ou quebrou
Esse cara é o Grunt!

Almir Filho

December 14, 2013
Tweet

More Decks by Almir Filho

Other Decks in Programming

Transcript

  1. 100k 200k 300k downloads 2013 nov out set ago jul

    jun mai abr mar fev jan 400k dez
  2. 100k 200k 300k downloads 2013-14 nov out set ago jul

    jun mai abr mar fev jan 400k dez 500k 600k 700k mai 2014
  3. rodar testes pré-processadores:dev js/css lint web server scaffolding criar sprites

    live reloading otimizar imagens concatenação pré-processadores:prod minificação e obfuscação gerar release deploy dev prod
  4. module.exports = function(grunt){ grunt.initConfig({ uglify: {/* config da tarefa */},

    jasmine: {/* config da tarefa */}, compass: {/* config da tarefa */} }); grunt.loadNpmTasks(‘grunt-contrib-uglify’); grunt.loadNpmTasks(‘grunt-contrib-jasmine’); grunt.loadNpmTasks(‘grunt-contrib-compass’); } Gruntfile.js configuração
  5. grunt.initConfig({ uglify: { options: { banner: ‘/* dave fulêro */\n’

    }, build: { src: ‘src/app.js’, dest: ‘build/app.min.js’ } }, jasmine: {/* config da tarefa */}, compass: {/* config da tarefa */} });
  6. grunt.initConfig({ concat: { options: { separator: ';', }, dist: {

    src: ['src/a.js', 'src/e.js'], dest: 'build/vogais.js', } } }); concat no Gruntfile.js
  7. var toSeconds = function(hour) { ! return hour * 3600;

    ! }; var toSeconds = function(a) { ! return a * 3600; ! }; var toSeconds=function(a){return a*3600;}; obfuscação minificação
  8. grunt.initConfig({ compass: { dev: { options: { sassDir: 'src/scss', cssDir:

    'build/css', imagesDir: 'src/img', generatedImagesDir: 'build/img' } }, prod: { /* ... */ } }}); compass no Gruntfile.js
  9. grunt.initConfig({ compass: { dev: { /* ... */ }, prod:

    { options: { sassDir: 'src/scss', cssDir: 'build/css', imagesDir: 'src/img', generatedImagesDir: 'build/img', outputStyle: 'compressed', noLineComments: true }}}}); compass no Gruntfile.js