Chargement...

Grunt


Grunt  javascript

Grunt, grunt, grunt. Quelle merveille!

N'avez-vous jamais rêvé d'avoir un logiciel qui s'occupe de toutes vos tâches rébarbatives? Un logiciel qui concatène vos fichiers tout en les compressant, qui lance votre serveur web, qui transforme vos .coffee en .js et vos .scss en .css? Et qui rafraichit votre navigateur en temps réel lorsque vous modifiez un fichier sous écoute? Un fichier HTML CSS ou JS qu'importe rien n'effraie notre Grunt! Même pas le mastodonte Symfony! Grunt c'est l'outil qui va vous faire aimer l'intégration des technologies récentes du web dans vos projets.

Pour résumer Grunt c'est le dieu des programmeurs web.

Grunt

Que fait Grunt?

  • * Minimifie et concatène les données
  • * Compile les fichiers LESS et SASS
  • * Tests unitaires
  • * Vérifie la syntaxe des fichiers JS
  • * Rafrachit en temps réel vos données!
  • * Il fait tout !!! Du moment que vous lui trouvez le plugin désiré

Installer Grunt

On part du principe que vous avez déjà installé NodeJS.

Sinon:

sudo aptitude install nodejs nodejs-legacy npm
sudo chown -R $USER /usr/local

Et enfin installons notre Grunt:

npm install -g grunt-cli

Installer un plugin Grunt

A la racine de votre projet lancez la commande suivante:

npm init

Puis lancez l'installation du plugin Grunt qui vous intéresse

npm install grunt-contrib-concat --save-dev
npm install grunt-contrib-sass --save-dev
npm install grunt-contrib-watch --save-dev
npm install grunt-contrib-imagemin --save-dev

Vous trouvez des plugins Grunt à cette adresse: Grunt Plugins


Gruntfile.js

Tout se passe dans Gruntfile. Voici un exemple de configuration: - Utilisé pour Symfony, Compass, Karma, etc. -

module.exports = function (grunt) {
    /**
     * Déclaration, configuration des tâches,
     * l'ordre de déclaration n'a aucune importance
     */
    grunt.initConfig({

        shell: {
            server: {
                options: {
                    stdout: true
                },
                command: 'app/console server:run'
            },

            coffee: {
                options: {
                    stdout: true,
                },
                command: 'phantomjs public/js/main.js'
            },
         
        },

        /**
         * Configuration du plugin concat
         * une seule tâche qui va concatener tous les fichiers situés dans 'src/js/'
         * dans un seul fichier 'dist/js/built.js'
         */
        concat: {
            dist: {
                src: [
                     'public/bower_components/jquery/dist/jquery.min.js',
                     'public/bower_components/bootstrap/dist/js/bootstrap.min.js',
                     'public/bower_components/angularjs/angular.min.js',
                     'public/js/main.js'
                     ],
                dest: 'web/resources/js/js.js'
            },
            css: {
                src: [
                'public/bower_components/bootstrap/dist/css/bootstrap.min.css',
                'public/bower_components/font-awesome/css/font-awesome.min.css',
                'public/css/stylesheets/main.css'
                ],
                dest: 'web/resources/css/css.css',
              }
        },

        /**
         * Configuration du plugin uglify
         * une seule tâche qui va minimifier le fichier built.js
         * généré par la tâche précédente
         */
        uglify: {
            dist: {
                src: ['web/resources/js/js.js'],
                dest: 'web/resources/js/js.js'
            }
        },
        /**
         * Configuration du plugin watch
         * une seule tâche, qui va scruter le répertoire src
         * et si un fichier est modifié, va lancer la tâche 'default'
         */
        watch: {

            js : {
                files: 
                [
                'public/js/main.js',
                'public/css/global.css'
                ],
                tasks: ['concat']
            },

            coffee : {
                files: 'public/js/src/*.coffee',
                tasks: ['coffee:compile'],
            },

            compass: {
                files: 'public/css/sass/*.scss',
                tasks: ['compass:dev', 'concat:css'],
            },
            livereload: {
                files: [
                'web/resources/css/css.css', 
                'web/resources/js/js.js',
                'src/ENGEL/AwesomeBundle/Resources/views/Front/*.twig'],
                options: {
                    livereload: true
                }
            }
        },
        coffee: {
            compile: {
                files: {
                    'public/js/main.js': ['public/js/src/main.coffee', 'public/js/src/*.coffee']
                }
            }
        },
        compass: {
            dist: {
                options: {
                    sassDir: 'public/css/sass',
                    cssDir: 'public/css/stylesheets'
                }
            },
            dev: {
               options: {              
                   sassDir: 'public/css/sass',
                   cssDir: 'public/css/stylesheets',
                   imagesDir: 'public/css/images',
                   environment: 'development',
                   noLineComments: true
               }
           },
        },
        imagemin: {
            dynamic: {
                files: [{
                    expand: true,
                    cwd: 'public/images/',
                    src: ['**/*.{png,jpg,gif}'],
                    dest: 'web/resources/images/'
                }]
            }
        },

        karma: {
            unit: { configFile: 'tests/karma.conf.js' }
        },

    });

    // Chargement des plugins Grunt
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-imagemin');
    grunt.loadNpmTasks('grunt-karma');
    grunt.loadNpmTasks('grunt-contrib-compass');
    grunt.loadNpmTasks('grunt-symfony2-console');
    grunt.loadNpmTasks('grunt-shell');
    grunt.loadNpmTasks('grunt-contrib-coffee');
 
    // Enregistrement de tâches
    grunt.registerTask('default', ['concat', 'watch']);
    grunt.registerTask('watch-src', ['default', 'watch']);

};

Pour lancer grunt exécutez la commande suivante:

grunt

Il exécutera la tâche "default" si aucun argument n'est renseigné. Dans notre cas il executera les tâches watch et mettra donc à jour nos fichiers Sass et concatenera les fichiers indiqués s'ils sont modifiés.

Pour lancer les tests unitaires on lancera la tâche karma:

grunt karma

Grunt concrètement

Alors honnêtement je ne sais pas si j'utiliserais autant les technologies web sans Grunt. Pour les derniers projets sur lesquels j'ai travaillé, j'utile essentiellement le combo Symfony / Angular / CoffeeScript / Compass / Karma .

Grâce à Grunt si je modifie un .coffee par exemple et que je l'enregistre, il me transforme le .coffee en .js puis le concatène avec les autres puis le compress pour ensuite le déplacer dans le dossier public et enfin il me refraichit le rendu de mon navigateur. Tout ça en une seule fois juste parce que j'ai modifié un fichier qu'il écoute. De la magie pure je vous dis!

Symfony et livereload

livereload est ce plugin qui permet de rafraichir en temps réel le rendu navigateur. En gros si vous modifiez un fichier et que vous l'enregistrez, Grunt rafrachit votre navigateur pour le mettre à jour.

Pour utiliser cette technologie avec Symfony vous devez ajouter le bundle suivant dans composer:

"kunstmaan/live-reload-bundle": "2.3.6"

Plus d'infos sur Grunt

Lien complémentaire: Grunt


UNE QUESTION SUR L'ARTICLE?


CSSW Apprendre à créer son site web CSSW