gulp (& symfony): working with assets

Question

I need to implement gulp in symfony in a legacy application. The legacy <-> symfony application part is working, but I'm a bit stuck on the gulp <-> symfony part. The 'web' folder is called html in our application. In this folder, I have a components folder for libs like bootstrap, jquery, ..., and js, css, image,... folder. In our js folder, we have a config folder, which contains default configs for some libs (e.g. dataTables) and a extensions folder, which contains extensions (e.g. jquery extensions), next to some self-written js files. I need to combine these config/extension files with the js lib files.

My idea to do this, was to create a json object (called modules), with all assets. Then, I would loop over this modules object, and call the gulp tasks if needed.

e.g:

`var modules = {
    bootstrap : {
        css: ['/html/components/bootstrap/css/bootstrap.min.css, html/css/layout.css'],
        fonts: ['html/components/bootstrap/fonts/*'],
        js: ['/html/components/bootstrap/js/bootstrap.min.js']
    }, ...
};`

for bootstrap, I would call a gulp task to minify and combine the css files and to update the urls and imports, a task copy the fonts to the html/fonts folder and a task to copy the js file to html/js

Is this a good approach? Or is there a better way of managing assets in symfony? (I know you have the Assetic bundle, but we do use es6 sometimes, so we need gulp to translate some js files with babel, and this is not possible (as far as I know, with Assetic)

N.P. N.P. · Accepted Answer · 2017-09-12T08:35:18

I'll answer my own question, as it might help other people.

Symfony has introduced 'encore' for asset management. There's a chapter about encore. Encore uses webpack, which is a well-know module bundler.

gulp (& symfony): working with assets

1 Answers