Bye bye gulp

.gitignore

@@ -1,4 +1,5 @@
 /public/assets
+/public/build
 /public/css
 /public/js
 /public/media
@@ -14,6 +15,9 @@
 /composer.lock
 /node_modules
 
+/npm-debug.log
+/yarn-error.log
+
 /etc/build/*
 !/etc/build/.gitignore
 

UPGRADE-1.10.md

@@ -3,3 +3,36 @@
 ### New API
 
 1. API CartShippingMethod key `cost` has been changed to `price`.
+
+### From Gulp to Webpack Encore
+
+After migrating to the Webpack, asset paths should be changed. By default, it will be compiled to the `public/build/admin/...` and `public/build/shop/...` folder:
+
+```
+- <img src="{{ asset('assets/admin/img/admin-logo.svg') }}" class="ui fluid image">
++ <img src="{{ asset('build/admin/images/admin-logo.svg', 'admin') }}" class="ui fluid image">
+```
+
+Output paths can be changed freely, but keep in mind, that before every build, the directory will be cleared, so old files may be removed.
+
+Scripts and styles paths have also changed:
+
+```
+- {% include '@SyliusUi/_javascripts.html.twig' with {'path': 'assets/admin/js/app.js'} %}
++ {{ encore_entry_script_tags('admin-entry', null, 'admin') }}
+```
+
+```
+- {% include '@SyliusUi/_stylesheets.html.twig' with {'path': 'assets/admin/css/style.css'} %}
++ {{ encore_entry_link_tags('admin-entry', null, 'admin') }}
+```
+
+```
+- {% include '@SyliusUi/_javascripts.html.twig' with {'path': 'assets/shop/js/app.js'} %}
++ {{ encore_entry_script_tags('shop-entry', null, 'shop') }}
+```
+
+```
+- {% include '@SyliusUi/_stylesheets.html.twig' with {'path': 'assets/shop/css/style.css'} %}
++ {{ encore_entry_link_tags('shop-entry', null, 'shop') }}
+```

composer.json

@@ -107,6 +107,7 @@
         "symfony/translation": "^4.4 || ^5.2",
         "symfony/twig-bundle": "^4.4 || ^5.2",
         "symfony/validator": "^4.4 || ^5.2",
+        "symfony/webpack-encore-bundle": "^1.11",
         "symfony/yaml": "^4.4 || ^5.2",
         "twig/intl-extra": "^2.12",
         "twig/twig": "^2.12",

config/bundles.php

@@ -61,4 +61,5 @@
     Sonata\Doctrine\Bridge\Symfony\SonataDoctrineSymfonyBundle::class => ['all' => true],
     Sonata\Twig\Bridge\Symfony\SonataTwigSymfonyBundle::class => ['all' => true],
     SyliusLabs\Polyfill\Symfony\Security\Bundle\SyliusLabsPolyfillSymfonySecurityBundle::class => ['all' => true],
+    Symfony\WebpackEncoreBundle\WebpackEncoreBundle::class => ['all' => true],
 ];

config/packages/assets.yaml

@@ -0,0 +1,7 @@
+framework:
+    assets:
+        packages:
+            shop:
+                json_manifest_path: '%kernel.project_dir%/public/build/shop/manifest.json'
+            admin:
+                json_manifest_path: '%kernel.project_dir%/public/build/admin/manifest.json'

config/packages/webpack_encore.yaml

@@ -0,0 +1,5 @@
+webpack_encore:
+    output_path: '%kernel.project_dir%/public/build/default'
+    builds:
+        shop: '%kernel.project_dir%/public/build/shop'
+        admin: '%kernel.project_dir%/public/build/admin'

package.json

@@ -1,6 +1,5 @@
 {
   "dependencies": {
-    "babel-polyfill": "^6.26.0",
     "chart.js": "^2.9.3",
     "jquery": "^3.5.0",
     "jquery.dirtyforms": "^2.0.0",
@@ -9,45 +8,18 @@
     "slick-carousel": "^1.8.1"
   },
   "devDependencies": {
-    "@symfony/webpack-encore": "^0.28.0",
-    "babel-core": "^6.26.3",
-    "babel-plugin-external-helpers": "^6.22.0",
-    "babel-plugin-module-resolver": "^3.1.1",
-    "babel-plugin-transform-object-rest-spread": "^6.26.0",
-    "babel-preset-env": "^1.7.0",
-    "babel-register": "^6.26.0",
-    "dedent": "^0.7.0",
+    "@symfony/webpack-encore": "^1.1.2",
     "eslint": "^4.19.1",
     "eslint-config-airbnb-base": "^12.1.0",
     "eslint-import-resolver-babel-module": "^4.0.0",
     "eslint-plugin-import": "^2.11.0",
-    "fast-async": "^6.3.7",
-    "gulp": "^4.0.0",
-    "gulp-chug": "^0.5",
-    "gulp-concat": "^2.6.0",
-    "gulp-debug": "^2.1.2",
-    "gulp-if": "^2.0.0",
-    "gulp-livereload": "^4.0.1",
-    "gulp-order": "^1.1.1",
-    "gulp-sass": "^4.0.1",
-    "gulp-sourcemaps": "^1.6.0",
-    "gulp-uglifycss": "^1.0.5",
-    "merge-stream": "^1.0.0",
-    "rollup": "^0.60.2",
-    "rollup-plugin-babel": "^3.0.4",
-    "rollup-plugin-commonjs": "^9.1.3",
-    "rollup-plugin-inject": "^2.0.0",
-    "rollup-plugin-node-resolve": "^3.3.0",
-    "rollup-plugin-uglify": "^4.0.0",
-    "sass-loader": "^7.0.1",
-    "upath": "^1.1.0",
-    "yargs": "^6.4.0"
+    "node-sass": "^4.5.3",
+    "sass-loader": "^11.0.0"
   },
   "scripts": {
-    "build": "gulp build",
-    "gulp": "gulp build",
-    "lint": "yarn lint:js",
-    "lint:js": "eslint gulpfile.babel.js src/Sylius/Bundle/AdminBundle/gulpfile.babel.js src/Sylius/Bundle/ShopBundle/gulpfile.babel.js src/Sylius/Bundle/UiBundle/Resources/private/js src/Sylius/Bundle/AdminBundle/Resources/private/js src/Sylius/Bundle/ShopBundle/Resources/private/js"
+    "dev": "encore dev",
+    "build": "encore production",
+    "watch": "encore dev --watch"
   },
   "repository": {
     "type": "git",

src/Sylius/Bundle/AdminBundle/Resources/views/Layout/_logo.html.twig

@@ -1,5 +1,5 @@
 <a class="item" href="{{ path('sylius_admin_dashboard') }}" style="padding: 13px 0;">
     <div style="max-width: 90px; margin: 0 auto;">
-        <img src="{{ asset('assets/admin/img/admin-logo.svg') }}" class="ui fluid image">
+        <img src="{{ asset('build/admin/images/admin-logo.svg', 'admin') }}" class="ui fluid image">
     </div>
 </a>

src/Sylius/Bundle/AdminBundle/Resources/views/Layout/_scripts.html.twig

@@ -1 +1 @@
-{% include '@SyliusUi/_javascripts.html.twig' with {'path': 'assets/admin/js/app.js'} %}
+{{ encore_entry_script_tags('admin-entry', null, 'admin') }}

src/Sylius/Bundle/AdminBundle/Resources/views/Layout/_styles.html.twig

@@ -1 +1 @@
-{% include '@SyliusUi/_stylesheets.html.twig' with {'path': 'assets/admin/css/style.css'} %}
+{{ encore_entry_link_tags('admin-entry', null, 'admin') }}

src/Sylius/Bundle/AdminBundle/Resources/views/Security/_content.html.twig

@@ -1 +1 @@
-{% include '@SyliusUi/Security/_login.html.twig' with {'action': path('sylius_admin_login_check'), 'paths': {'logo': 'assets/admin/img/logo.png'}} %}
+{% include '@SyliusUi/Security/_login.html.twig' with {'action': path('sylius_admin_login_check'), 'paths': {'logo': asset('build/admin/images/logo.png', 'admin')}} %}