Utiliser Gulp avec Magento (+50% plus rapide que Grunt)

•  Avoir installer un thème : https://developer.adobe.com/commerce/frontend-core/guide/themes/create-storefront/
•  avoir gulp installé en local gloablement

$ npm install -g gulp-cli

•  NVM : si vous avez suivi le tuto d'installation de magento avec docker, voici comment l'installer :  

$ apt install curl
$ touch ~/.bashrc // Si ce fichier n'existe pas
$ curl https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash
$ source ~/.bashrc

2) Installer Node en version 11 (obligatoire)

Il est absolument nécessaire d'être en version 11 de Node (pas 10 ni 12, v11 !)

$ nvm install v11
 
 root@5c7247752ef5:/# node -v
v11.15.0

3) Télécharger le repo subodha/magento-2-gulp avec composer

À partir de la racine du site, voici ce que vous avez à faire : 

$ composer config repositories.gulp vcs https://github.com/subodha/magento-2-gulp.git
$ composer require subodha/magento-2-gulp:"1.*"

Ajouter également ces lignes à votre composer.json à la racine : 

...
    "scripts": {
        "post-update-cmd": [
            "cd vendor/subodha/magento-2-gulp && npm install"
        ],
        "post-install-cmd": [
            "cd vendor/subodha/magento-2-gulp && npm install"
        ]
    }
...

$ composer install

4) Configurer le fichier dev/tools/grunt/configs/themes.js

Vous devez ajouter votre thème en l'ajoutant à la configuration dans ce fichier themes.js :

wablank: { // nom du thème dans la config
	area: 'frontend',
	name: 'WebAtypique/blank', // pour un thème qui est dans app/design/frontend/WebAtypique/Blank
	locale: 'en_US', // Votre locale (en_US, fr_FR, ...)
	files: [
		'css/styles-m',
		'css/styles-l',
		'css/email',
		'css/email-inline'
	],
	dsl: 'less'
},

Le fichier final peut ressembler à cela : 

/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */

'use strict';

/**
 * Define Themes
 *
 * area: area, one of (frontend|adminhtml|doc),
 * name: theme name in format Vendor/theme-name,
 * locale: locale,
 * files: [
 * 'css/styles-m',
 * 'css/styles-l'
 * ],
 * dsl: dynamic stylesheet language (less|sass)
 *
 */
module.exports = {
    blank: {
        area: 'frontend',
        name: 'Magento/blank',
        locale: 'en_US',
        files: [
            'css/styles-m',
            'css/styles-l',
            'css/email',
            'css/email-inline'
        ],
        dsl: 'less'
    },
    wablank: {
        area: 'frontend',
        name: 'WebAtypique/blank',
        locale: 'en_US',
        files: [
            'css/styles-m',
            'css/styles-l',
            'css/email',
            'css/email-inline'
        ],
        dsl: 'less'
    },
    luma: {
        area: 'frontend',
        name: 'Magento/luma',
        locale: 'en_US',
        files: [
            'css/styles-m',
            'css/styles-l'
        ],
        dsl: 'less'
    },
    backend: {
        area: 'adminhtml',
        name: 'Magento/backend',
        locale: 'en_US',
        files: [
            'css/styles-old',
            'css/styles'
        ],
        dsl: 'less'
    }
};

C'était la dernière étape de configuration. Vous pouvez maintenant utiliser Gulp !

5) Run Gulp avec Magento

Pensez à remplacer --wablank par le nom que vous avez donné dans le fichier dev/tools/grunt/configs/themes.js et en_US par la ou les locales que vous utilisez

$ vendor/bin/gulpm2 build --wablank

$ php bin/magento setup:static-content:deploy en_US -f
$ vendor/bin/gulpm2 watch --wablank

Vous n'avez plus qu'à modifier vos styles dans votre thème et à admirer la vitesse de compilation de Gulp pour votre magento 2.

Image

Source :

• Repo magento-2-gulp