Pré-requis
- Disposer d’un serveur sous Linux Debian 8
- Avoir une connexion au serveur par SSH ou par un Terminal
- Avoir installer Node.js
- Avoir télécharger les fichiers Magento 2 nécessaires à l’installation
Objectifs
Utiliser Gulp pour Magento 2.
Tutoriel
Création de l’arborescence
Créer l’arborescence suivante dans le dossier /app :
- app
- local
- theme
- local
Création des fichiers contenant les scripts d’éxé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\" && 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