Grunt power!
20 Apr 2014
Grunt és un task runner per les teves web apps.
- Es javascript
- Milers de plugins, instal.lació de paquets via NPM
- Amplia comunitat. S'està convertint en un estandart.
- Es gratis :-)
- Potser es més fácil fer servir apps de precompiladors com codekit, livereload o prepros, no son gratis ni tens el control.
- Ets molt més guay si dius "faig servir Grunt desde la terminal, bla,bla,bla"
A mi m'ha funcionat molt be en els ultims projectes, el meu fa:
- "grunt build " a la terminal i :
- s'optimitzen les imatges
- precompila el scss
- Autoprefixa el css
- Fa un grunt-uncss (treu les classes que no fas servir)
- Css min
- I grunt-watch per anar refrescant el canvis amb "livereload" (requeix plugin de Chrome)
Te competidors, sobretot està en auge gulp
- Segur que pot estar millor implementada però a mi va be la seguent:
module.exports = function(grunt){
// 1. All configuration goes here
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
imageoptim: {
myPngs: {
options: {
jpegMini: false,
imageAlpha: true,
quitAfter: true
},
src: ['img/*.png']
},
myJpgs: {
options: {
jpegMini: false,
imageAlpha: false,
quitAfter: true
},
src: ['img/*.jpg']
}
},
sass: {
options: {
style: 'compressed'
},
dist: {
files: {
'css/style.css' : 'scss/main.scss'
}
}
},
autoprefixer: {
dist: {
files: {
'css/style.css': 'css/style.css'
}
}
},
uncss: {
dist: {
files: {
'css/style.css': ['index.html']
}
}
},
cssmin: {
dist: {
files: { 'css/style.css': ['css/style.css'] }
}
},
watch: {
options: {
livereload: true,
},
tasks: ['newer:imageoptim:all'],
html: {
files: ['*.html']
},
css: {
files: ['scss/*.scss'],
tasks: ['sass'],
options: {
spawn: false,
},
images: {
files: ['*jpg','*png']
},
}
}
});
// 3. Where we tell Grunt we plan to use this plug-in.
grunt.loadNpmTasks('grunt-imageoptim');
grunt.loadNpmTasks('grunt-grunticon');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.loadNpmTasks('grunt-uncss');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-watch');
// 4. Where we tell Grunt what to do when we type "grunt" into the terminal.
grunt.registerTask('default',['imageoptim','sass','autoprefixer','uncss','cssmin','watch']);
};
