Accueil
Magento 2
Thème
Configurer Gulp pour Magento 2

Configurer Gulp pour Magento 2

Pré-requis

Disposer d'un serveur sous Linux Debian 8
Avoir une connexion au serveur par SSH ou par un Terminal
Avoir installé Node.js
Avoir téléchargé les fichiers Magento 2 nécessaires à son installation

Objectif

Utiliser Gulp pour Magento 2.

Tutoriel

Création de l'arborescence

Créer l'arborescence suivante dans le dossier /app : app/local/theme.

Création des fichiers contenant les scripts d'exécution

Dans le dossier local, créer les fichiers gulpfile.js et package.json.

Editer le fichier package.json et insérer le contenu suivant :

{
  "name": "local",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" &amp;&amp; exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "chalk": "^2.0.1",
    "gulp": "^3.9.1",
    "gulp-clean": "^0.3.2",
    "gulp-cli": "^1.3.0",
    "gulp-exec": "^2.1.3",
    "gulp-less": "^3.3.2",
    "gulp-run": "^1.7.1"
  }
}

Editer le fichier gulpfile.js et insérer le contenu suivant :

'use strict';

var gulp  = require('gulp'),
    less  = require('gulp-less'),
    gutil = require('gulp-util'),
    chalk = require('chalk'),
    clean = require('gulp-clean'),
    run   = require('gulp-run'),
    exec  = require('gulp-exec'),
    /** Chargement du fichier de configuration des thèmes */
    themesConfig = require('./theme/themes'),
    /** Récupèration du nom du thème */
    options = ((process.argv.slice(process.argv.length-1))[0]).substring(2),
    /** Récupération de la configuration du thème en fonction de l'option d'éxécution du Gulp */
    theme = themesConfig[options],
    /** Définition de la racine du site Magento 2 */
    magentoRootFolder = './../../',
    /** Création du chemin du thème */
    themeSrc = theme.area + "/" + theme.vendor + "/" + theme.name,
    /** Création du dossier surveillé en fonction du thème */
    themeWatched = magentoRootFolder + "app/design/" + themeSrc,
    /** Définition du chemin de destination des fichiers compilés */
    themeDest = magentoRootFolder + "pub/static/" + themeSrc + '/' + theme.locale,
    execOptions = {
        continueOnError: false, // default = false, true means don't emit error event
        pipeStdout: false, // default = false, true means stdout is written to file.contents
        customTemplatingThing: "test" // content passed to gutil.template()
    },
    execReportOptions = {
        err: true, // default = true, false means don't write err
        stderr: true, // default = true, false means don't write stderr
        stdout: true // default = true, false means don't write stdout
    };

gulp.task('launchWatcher', function() {
    gutil.log(chalk.blue('Watcher lancé pour le thème : ' + themeSrc));
    gulp.watch([ themeWatched + '/**/*.less'], ['compileLess']);
});

gulp.task('compileLess', function() {
    var filesToCompile = [],
        magentoDevSourceDeploy = 'bin/magento dev:source-theme:deploy',
        cmd = magentoRootFolder + magentoDevSourceDeploy + ' --type="less" --area="' + theme.area + '" --theme="' + theme.vendor + '/'+ theme.name + '" --locale="' + theme.locale + '"';

    gutil.log(chalk.blue('Exécution de la commande : ' + cmd));
    gulp.src('')
        .pipe(exec(cmd), execOptions)
        .pipe(exec.reporter(execReportOptions));

    gutil.log(chalk.blue('Préparation des fichiers LESS en cours...'));
    theme.files.forEach(function(file) {
        filesToCompile.push(
            themeDest + '/' + file + '.less'
        );
    });

    return gulp
        .src(filesToCompile)
        .pipe(less().on('error', function (error) {
            gutil.log(chalk.red('Erreur lors de la compilation LESS : ' + error.message));
        }))
        .pipe(gulp.dest(themeDest + '/css'))
        .pipe(gutil.buffer(function() {
            gutil.log(chalk.green('Compilation LESS réalisée avec succès'));
        }));
});

/** Permet de lancer par défaut le watcher */
gulp.task('default', ['launchWatcher']);

Création du fichier de paramétrages

Créer un fichier theme.js au sein du sous-dossier theme et intégrer le contenu suivant :

module.exports = {
    nom_du_theme: {
        "locale": "code_de_langue",
        "area": "code_de_l_area",
        "vendor": "nom_du_vendor",
        "name": "nom_du_theme",
        "files": [
            "css/styles-m",
            "css/styles-l"
        ]
    }
};

Lancer le watcher

Exécuter la commande suivante pour lancer le watcher : gulp watch --nom_du_theme

Section title