Grunt
Kézako
- Javascript task runner
- Make, Rake, Jake, Maven, Ant ...
Concrétement
- less, sass, stylus,
- tests, minification,
- lint, coffee,
- compilation de templates,
- optimisation d'images,
- publication, déploiement,
- compression, documentation,
- i18n, sprites, screenshots,
- ...
- 1688 plugins
Utiliser les tâches des autres
- Gruntfile.js
- http://gruntjs/plugins
- contrib-xxx
- ...
- == 98% du temps
Créer ses propres tâches
Prérequis
-
npm (donc node)
-
http://nodejs.org/download/
grunt-cli et grunt
- grunt-cli : installé globalement
- grunt : installé localement
- grunt-cli : lanceur du grunt local
- 1 projet == 1 grunt
grunt-cli : 43 lignes
Installation
- (sudo) npm install -g grunt-cli
- mkdir truc && cd truc
- npm init
- npm install grunt --save-dev
Gruntfile.js
- Fichier de configuration
- Format : javascript !
Structure
module.exports = function(grunt) {
grunt.initConfig({
// Configuration des tâches
});
// Enregistrement d'une tâche
grunt.registerTask(taskName, [description, ] taskFunction)
// Chargement d'un plugin
grunt.loadNpmTasks('package');
};
Exemple
Tâches
- Tâche :
- grunt.registerTask(taskname, function)
- Alias :
- grunt.registerTask(taskname, [task1, task2])
- Multi-tâche :
-
grunt.registerMultiTask(taskName, function)
Simple TASK
-
Créez une tâche "Hello World"
- Lancez votre tâche
Simple TASK
module.exports = function(grunt) {
// Hello World Tasj grunt.registerTask('hello', function() { console.log('Hello World'); }); };
ALIAS
- Créez 2 tâches
- Les appeler dans un alias
- Utilisez "default" comme nom de tâche
ALIAS
module.exports = function(grunt) {
// Hello World Task
grunt.registerTask('hello', function() {
console.log('Hello World');
});
// Bonjour le monde Task
grunt.registerTask('bonjour', function() {
console.log('Bonjour le monde');
});
// Alias Task
grunt.registerTask('default', ['bonjour', 'hello']);
};
MULTI TASK
- Paramètres
grunt.initConfig({
log: {
foo: [1, 2, 3],
bar: 'hello world',
baz: false
}
});
- Code
grunt.registerMultiTask('log', function() {
// this.target
// this.data
});
MULTI TASK
- Créez une tâche multiple "toto"
- Qui affiche le contenu de sa config
- Avec 2 targets "tata" et "titi"
- Lancez chaque tâche séparément et ensemble
MUlti task
module.exports = function(grunt) {
grunt.initConfig({
toto: {
tata: "Bla",
titi: "Bli"
}
});
grunt.registerMultiTask('toto', function() {
console.log(this.data);
});
};
Options
- this.options([default]);
- Peuvent-être surchargées dans chaque target
grunt.initConfig({
toto: {
options: { key: "v1" },
target1: {
options: { key: "v2" },
},
target2: "Bli"
}
});
grunt.registerMultiTask('toto', function() {
var options = this.options({
tada: 'zoum'
});
});
TEmplates
- <%= parameter %>
- Remplacé avant le lancement de la tâche
grunt.initConfig({
task: {
options: '<%= param %>'
}
param: 'valeur'
});
FICHIERS
- mode Compact
- mode Object
- mode Array
- Filter
- Globbing
- mode dynamic
APARTé
npm install grunt-contrib-copy --save-dev
grunt.loadNpmTasks('grunt-contrib-copy');
Compact Mode
- src: "mon fichier source"
- dest: "ma destination"
- src: ["mes fichiers sources"]
COMPACT MODE
- Copiez votre Gruntfile.js dans un répertoire /tmp
- Copiez tous les fichiers js et json dans le répertoire /tmp
COMPACT MODE
copy: {
target: {
src: ['*.js', '*.json'],
dest: 'tmp/'
}
}
Object Mode
files: {
'dest file': 'src file',
'dest file': ['src files']
}
OBJECT MODE
Même exercice :
-
Copiez votre Gruntfile.js dans un répertoire /tmp
-
Copiez tous les fichiers js et json dans le répertoire /tmp
Object mode
copy: {
task: {
files: {
'temp/': ['*.json', '*.js']
}
}
}
ARRAY MODE
files: [
{src: 'fichier source', dest: 'destination'},
{src: ['fichiers sources'], dest: 'destination'}
]
ARRAY MODE
Même exercice
Array mode
copy: {
task: {
files: [
{src: ['*.json', '*.js'], dest: 'temp/'}
]
}
}
Globbing & filter
- *
- ?
- **
- {}
- !
- 'isFile'
- Node fs.Stats
- Custom
Dynamic mode
files: [{
expand: boolean,
cwd: string,
src: [string],
dest: string,
ext: string,
flatten: boolean,
rename: function
}]
Dynamic mode
- Copiez ts les fichiers .js de node_modules dans /tmp
- Idem, mais sans garder l'arborescence
- :) Une erreur ?
QQS PLUGINS
- grunt-contrib-imagemin
- grunt-contrib-watch
- grunt-contrib-{less, stylus, sass}
Imagemin
imagemin: {
static: {
files: [{
expand: true,
cwd: 'src/',
src: ['**/*.{png,jpg,gif}'],
dest: 'dist/'
}]
}
}
Grunt-contrib-watch
module.exports = function(grunt) {
grunt.initConfig({
copy: {
scripts: {
files: [{
expand: true,
src: ['*.js'],
dest: 'tmp/'
}]
}
},
watch: {
scripts: {
files: ['*.js'],
tasks: ['copy'],
},
}
});
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-watch');
};
grunt sugar
- grunt.file.copy
- grunt.file.readJSON
- grunt.template.today("yyyy-mm-dd")
- ...
STATIC SITE BUILDER
module.exports = function(grunt) {
grunt.initConfig({
carpenter: {
base: {
files: [
{
expand: true,
cwd: 'content/',
src: ['**/*.md'],
dest: 'dist',
ext: '.html'
}
]
}
}
});
grunt.loadNpmTasks('grunt-carpenter');
};
GruntJS
By t8g
GruntJS
- 5,415