mirror of
https://github.com/Sylius/Sylius.git
synced 2026-07-14 17:10:53 +00:00
117 lines
4.4 KiB
ReStructuredText
117 lines
4.4 KiB
ReStructuredText
How to migrate from Gulp to Webpack (Sylius 1.12 or later)
|
|
==========================================================
|
|
|
|
Now we will walk through the process of migrating your project from Gulp to Webpack.
|
|
|
|
.. note::
|
|
|
|
This guide assumes your project is using Gulp as a build tool and you are using Sylius 1.12 or later.
|
|
If you are using Sylius 1.11 or earlier check our :doc:`/cookbook/frontend/migrating-to-webpack-1-11-or-earlier` guide.
|
|
|
|
.. warning::
|
|
|
|
Keep in mind you might have to adjust some steps to your project needs. Every project is different, and we are not able
|
|
to provide a universal solution for every case.
|
|
|
|
**1.** Update your dependencies version in ``package.json`` file to the latest version. You can copy the ``package.json`` content from
|
|
`Sylius/Sylius repository <https://github.com/Sylius/Sylius/blob/1.12/package.json>`_.
|
|
|
|
**2.** Remove the following files from you project:
|
|
|
|
* ``.babelrc``
|
|
* ``gulpfile.babel.js``
|
|
* ``yarn.lock``
|
|
* ``public/assets``
|
|
* ``node_modules``
|
|
|
|
**3.** Create a ``webpack.config.js`` file (or if you already have existing one, replace its content) using `webpack.config.js in the Sylius/Sylius-Standard repository <https://github.com/Sylius/Sylius-Standard/blob/1.12/webpack.config.js>`_ as a reference.
|
|
|
|
**4.** Create assets directory with the following structure:
|
|
|
|
.. code-block:: text
|
|
|
|
<project_root>/
|
|
├── assets/
|
|
│ ├── admin/
|
|
│ │ ├── entry.js <- this file can be empty for now
|
|
│ ├── shop/
|
|
│ │ ├── entry.js <- this file can be empty for now
|
|
|
|
**5a.** Create or replace ``config/packages/assets.yaml`` with the following configuration:
|
|
|
|
.. code-block:: yaml
|
|
|
|
framework:
|
|
assets:
|
|
packages:
|
|
admin:
|
|
json_manifest_path: '%kernel.project_dir%/public/build/admin/manifest.json'
|
|
shop:
|
|
json_manifest_path: '%kernel.project_dir%/public/build/shop/manifest.json'
|
|
app.admin:
|
|
json_manifest_path: '%kernel.project_dir%/public/build/app/admin/manifest.json'
|
|
app.shop:
|
|
json_manifest_path: '%kernel.project_dir%/public/build/app/shop/manifest.json'
|
|
|
|
**5b.** Create or replace ``config/packages/webpack_encore.yaml`` with the following configuration:
|
|
|
|
.. code-block:: yaml
|
|
|
|
webpack_encore:
|
|
output_path: '%kernel.project_dir%/public/build/default'
|
|
builds:
|
|
admin: '%kernel.project_dir%/public/build/admin'
|
|
shop: '%kernel.project_dir%/public/build/shop'
|
|
app.admin: '%kernel.project_dir%/public/build/app/admin'
|
|
app.shop: '%kernel.project_dir%/public/build/app/shop'
|
|
|
|
**6a.** Create or override ``templates/bundles/SyliusAdminBundle/_scripts.html.twig`` template with the following content:
|
|
|
|
.. code-block:: twig
|
|
|
|
{{ encore_entry_script_tags('admin-entry', null, 'admin') }}
|
|
{{ encore_entry_script_tags('app-admin-entry', null, 'app.admin') }}
|
|
|
|
**6b.** Create or override ``templates/bundles/SyliusAdminBundle/_styles.html.twig`` template with the following content:
|
|
|
|
.. code-block:: twig
|
|
|
|
{{ encore_entry_link_tags('admin-entry', null, 'admin') }}
|
|
{{ encore_entry_link_tags('app-admin-entry', null, 'app.admin') }}
|
|
|
|
**6c.** Create or override ``templates/bundles/SyliusShopBundle/_scripts.html.twig`` template with the following content:
|
|
|
|
.. code-block:: twig
|
|
|
|
{{ encore_entry_script_tags('shop-entry', null, 'shop') }}
|
|
{{ encore_entry_script_tags('app-shop-entry', null, 'app.shop') }}
|
|
|
|
**6d.** Create or override ``templates/bundles/SyliusShopBundle/_styles.html.twig`` template with the following content:
|
|
|
|
.. code-block:: twig
|
|
|
|
{{ encore_entry_link_tags('shop-entry', null, 'shop') }}
|
|
{{ encore_entry_link_tags('app-shop-entry', null, 'app.shop') }}
|
|
|
|
.. warning::
|
|
|
|
Files mentioned above are the most common ones that need to be overridden. Keep in mind, across your project you might
|
|
have other files using the old paths. You will have to find and adjust them manually.
|
|
|
|
**7.** Run the following commands:
|
|
|
|
.. code-block:: bash
|
|
|
|
yarn install
|
|
yarn build
|
|
|
|
**8.** If you have the following entry in your ``config/packages/_sylius.yaml`` file (available from ``Sylius 1.12``) remove it:
|
|
|
|
.. code-block:: yaml
|
|
|
|
sylius_ui:
|
|
use_webpack: false
|
|
|
|
Remove it or change its value to ``true``.
|
|
|
|
**9.** If you are using GitHub Actions or any other CI tool, make sure your workflow is using ``yarn build`` or ``yarn build:prod`` command.
|