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




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

Simple TASK



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

    console.log('Hello World');

  });

};


ALIAS



  1. Créez 2 tâches
  2. Les appeler dans un alias
  3. 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



  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

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




  1. Copiez votre Gruntfile.js dans un répertoire /tmp
  2. 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 :

  1. Copiez votre Gruntfile.js dans un répertoire /tmp
  2. 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


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

Dynamic mode


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

Dynamic mode


  1. Copiez ts les fichiers .js de node_modules dans /tmp
  2. Idem, mais sans garder l'arborescence
  3. :) 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

  • 2,865
Loading comments...

More from t8g