Grunt

• Javascript task runner
• Make, Rake, Jake, Maven, Ant ...

• less, sass, stylus,
• tests, minification,
• lint, coffee,
• compilation de templates,
• optimisation d'images,
• publication, déploiement,
• compression, documentation,
• i18n, sprites, screenshots,
• ...
• 1688 plugins

• Gruntfile.js
• http://gruntjs/plugins
• contrib-xxx
• ...
• == 98% du temps

• grunt-cli : installé globalement
• grunt : installé localement
• grunt-cli : lanceur du grunt local
•  1 projet == 1 grunt

• (sudo) npm install -g grunt-cli
• mkdir truc && cd truc
• npm init
• npm install grunt --save-dev

• Fichier de configuration
• Format : javascript !

 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');

};

• Tâche :
• grunt.registerTask(taskname, function)
• Alias :
• grunt.registerTask(taskname, [task1, task2])
• Multi-tâche :
• grunt.registerMultiTask(taskName,  function)
  

1. Créez une tâche "Hello World"
   
2. Lancez votre tâche

module.exports = function(grunt) {
  // Hello World Tasj
  grunt.registerTask('hello', function() {

    console.log('Hello World');

  });

};

1. Créez 2 tâches
2. Les appeler dans un alias
3. Utilisez "default" comme nom de tâche

 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']);

};

1. Créez une tâche multiple "toto"
2. Qui affiche le contenu de sa config
3. Avec 2 targets "tata" et "titi"
4. Lancez chaque tâche séparément et ensemble

module.exports = function(grunt) {
  grunt.initConfig({
    toto: {
      tata: "Bla",
      titi: "Bli"
    }
  });

  grunt.registerMultiTask('toto', function() {

    console.log(this.data);

  });

};

• 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'
    });
  }); 

• <%= parameter %>
• Remplacé avant le lancement de la tâche

grunt.initConfig({

  task: {
    options: '<%= param %>'
  }

  param: 'valeur'

});

• mode Compact
• mode Object
• mode Array
• Filter
• Globbing
• mode dynamic

npm install grunt-contrib-copy --save-dev

grunt.loadNpmTasks('grunt-contrib-copy');

• src: "mon fichier source"
• dest: "ma destination"
• src: ["mes fichiers sources"]

1. Copiez votre Gruntfile.js dans un répertoire /tmp
2. Copiez tous les fichiers js et json dans le répertoire /tmp

     copy: {

      target: {
        src: ['*.js', '*.json'],
        dest: 'tmp/'
      }

    }

files: {
  'dest file': 'src file',
  'dest file': ['src files']
}

     copy: {

      task: {
        files: {
          'temp/': ['*.json', '*.js']
        }
      }

    }

files: [
  {src: 'fichier source', dest: 'destination'},
  {src: ['fichiers sources'], dest: 'destination'}
]

copy: {
  
  task: {
    
    files: [
      {src: ['*.json', '*.js'], dest: 'temp/'}
    ]

  }

}

• *
• ?
• **
• {}
• !

• 'isFile'
• Node fs.Stats
• Custom

 files: [{
  expand: boolean,
  cwd: string,
  src: [string],
  dest: string,
  ext: string,
  flatten: boolean,
  rename: function
}]

1. Copiez ts les fichiers .js de node_modules dans /tmp
2. Idem, mais sans garder l'arborescence
3. :) Une erreur ?

• grunt-contrib-imagemin
• grunt-contrib-watch
• grunt-contrib-{less, stylus, sass}

    imagemin: {

      static: {

        files: [{
          expand: true,
          cwd: 'src/',
          src: ['**/*.{png,jpg,gif}'],
          dest: 'dist/'
        }]

      }

    }

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.file.copy
• grunt.file.readJSON
• grunt.template.today("yyyy-mm-dd")
• ...

 module.exports = function(grunt) {

  grunt.initConfig({

    carpenter: {
      base: {
        files: [
          {
            expand: true,
            cwd: 'content/',
            src: ['**/*.md'],
            dest: 'dist',
            ext: '.html'
          }
        ]
      }
    }

  });

  grunt.loadNpmTasks('grunt-carpenter');

};