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

Pré-requis :

Avoir installer un thème : https://developer.adobe.com/commerce/frontend-core/guide/themes/create-storefront/
Avoir gulp installé en local gloablementavec "npm install -g gulp-cli"
Installer nvm

Installer Node en version 11 (obligatoire)

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

Bash

1nvm install v11
2node -v
3v11.15.0

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

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

Bash

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

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

JSON

1...
2    "scripts": {
3        "post-update-cmd": [
4            "cd vendor/subodha/magento-2-gulp && npm install"
5        ],
6        "post-install-cmd": [
7            "cd vendor/subodha/magento-2-gulp && npm install"
8        ]
9    }
10...

Puis tapez :

Bash

1composer install

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 :

JavaScript

1wablank: { // nom du thème dans la config
2	area: 'frontend',
3	name: 'WebAtypique/blank', // pour un thème qui est dans app/design/frontend/WebAtypique/Blank
4	locale: 'en_US', // Votre locale (en_US, fr_FR, ...)
5	files: [
6		'css/styles-m',
7		'css/styles-l',
8		'css/email',
9		'css/email-inline'
10	],
11	dsl: 'less'
12},

Le fichier final peut ressembler à cela :

JavaScript

1/**
2 * Copyright © Magento, Inc. All rights reserved.
3 * See COPYING.txt for license details.
4 */
5
6'use strict';
7
8/**
9 * Define Themes
10 *
11 * area: area, one of (frontend|adminhtml|doc),
12 * name: theme name in format Vendor/theme-name,
13 * locale: locale,
14 * files: [
15 * 'css/styles-m',
16 * 'css/styles-l'
17 * ],
18 * dsl: dynamic stylesheet language (less|sass)
19 *
20 */
21module.exports = {
22    blank: {
23        area: 'frontend',
24        name: 'Magento/blank',
25        locale: 'en_US',
26        files: [
27            'css/styles-m',
28            'css/styles-l',
29            'css/email',
30            'css/email-inline'
31        ],
32        dsl: 'less'
33    },
34    wablank: {
35        area: 'frontend',
36        name: 'WebAtypique/blank',
37        locale: 'en_US',
38        files: [
39            'css/styles-m',
40            'css/styles-l',
41            'css/email',
42            'css/email-inline'
43        ],
44        dsl: 'less'
45    },
46    luma: {
47        area: 'frontend',
48        name: 'Magento/luma',
49        locale: 'en_US',
50        files: [
51            'css/styles-m',
52            'css/styles-l'
53        ],
54        dsl: 'less'
55    },
56    backend: {
57        area: 'adminhtml',
58        name: 'Magento/backend',
59        locale: 'en_US',
60        files: [
61            'css/styles-old',
62            'css/styles'
63        ],
64        dsl: 'less'
65    }
66};

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

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

Bash

1vendor/bin/gulpm2 build --wablank
2php bin/magento setup:static-content:deploy en_US -f
3vendor/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.

Screen de compilation gulp en direct avec magento 2