При компиляции дочерней темы Magento Grunt не удается обновить объединенные файлы стилей - PullRequest
0 голосов
/ 21 января 2019

Я настроил рабочий процесс Grunt, как описано здесь: https://devdocs.magento.com/guides/v2.3/frontend-dev-guide/css-topics/css_debug.html

Мой local-themes.js выглядит следующим образом:

➜  m2 git:(master) ✗ cat dev/tools/grunt/configs/local-themes.js
'use strict';
module.exports = {
    ac_default: {
        area: 'frontend',
        name: 'Ac/Default',
        locale: 'en_US',
        files: [
            'css/source/_extend',
        ],
        dsl: 'less'
    },
    ac_retail: {
        area: 'frontend',
        name: 'Ac/Retail',
        locale: 'en_US',
        files: [
            'css/source/_extend',
        ],
        dsl: 'less'
    },
    ac_wholesale: {
        area: 'frontend',
        name: 'Ac/Wholesale',
        locale: 'en_US',
        files: [
            'css/source/_extend',
        ],
        dsl: 'less'
    }
};

Я смотрю, как часы запускаются успешно, когдаМеняется меньше файла в моей дочерней теме:

➜  m2 git:(master) ✗ grunt watch:ac_retail -v
Initializing
Command-line options: --verbose, --gruntfile=/data/src/m2/Gruntfile.js

Reading "Gruntfile.js" Gruntfile...OK

Registering Gruntfile tasks.
Initializing config...OK
Loading "Gruntfile.js" tasks...OK
+ black-list-generator, clean-black-list, default, deploy, documentation, legacy-build, mage-minify, prod, refresh, spec, static                          

Running tasks: watch:ac_retail

Loading "grunt-contrib-watch" plugin

Registering "/data/src/m2/node_modules/grunt-contrib-watch/tasks" tasks.
Loading "watch.js" tasks...OK
+ watch

Running "watch:ac_retail" (watch) task
Waiting...
Verifying property watch exists in config...OK
Verifying property watch.ac_retail.files exists in config...OK
Live reload server started on *:35729
Watching pub/static/frontend/Ac/Retail/en_US/css/source/_extend.less for changes.
>> File "pub/static/frontend/Ac/Retail/en_US/css/source/_extend.less" changed.
Initializing
Command-line options: --verbose, --gruntfile=/data/src/m2/Gruntfile.js

Reading "Gruntfile.js" Gruntfile...OK

Registering Gruntfile tasks.
Initializing config...OK
Loading "Gruntfile.js" tasks...OK
+ black-list-generator, clean-black-list, default, deploy, documentation, legacy-build, mage-minify, prod, refresh, spec, static                          

Running tasks: less:ac_retail

Loading "grunt-contrib-less" plugin

Registering "/data/src/m2/node_modules/grunt-contrib-less/tasks" tasks.
Loading "less.js" tasks...OK
+ less

Running "less:ac_retail" (less) task
Verifying property less.ac_retail exists in config...OK
Files: pub/static/frontend/Ac/Retail/en_US/css/source/_extend.less -> pub/static/frontend/Ac/Retail/en_US/css/source/_extend.css                          
Options: banner="", sourceMap, strictImports=false, sourceMapRootpath="/", dumpLineNumbers=false, ieCompat=false                                          
Reading pub/static/frontend/Ac/Retail/en_US/css/source/_extend.less...OK
Writing pub/static/frontend/Ac/Retail/en_US/css/source/_extend.css.map...OK
File pub/static/frontend/Ac/Retail/en_US/css/source/_extend.css.map created.
Writing pub/static/frontend/Ac/Retail/en_US/css/source/_extend.css...OK
File pub/static/frontend/Ac/Retail/en_US/css/source/_extend.css created
>> 1 stylesheet created.
>> 1 sourcemap created.

Done.


Execution Time (2019-01-16 16:13:35 UTC-8)
loading tasks               42ms  ▇▇▇▇▇▇▇▇▇▇▇▇▇ 39%
loading grunt-contrib-less  34ms  ▇▇▇▇▇▇▇▇▇▇ 32%
less:ac_retail              31ms  ▇▇▇▇▇▇▇▇▇ 29%
Total 107ms

Live reloading pub/static/frontend/Ac/Retail/en_US/css/source/_extend.less...
Completed in 0.729s at Wed Jan 16 2019 16:13:35 GMT-0800 (Pacific Standard Time) - Waiting...

К сожалению, файлы styles-m.css или styles-l.css не обновляются.Поэтому, когда я обновляю страницу, изменения, сделанные в меньшем количестве файлов, не отражаются на странице.

Я отправил тикет в баг-трекер Magento, но он мне не особо помог.

https://github.com/magento/magento2/issues/20356

У меня вопрос.Кто-нибудь здесь использует Grunt, чтобы компилировать меньше для установки с несколькими дочерними темами?

В моем случае предполагаемое наследование тем выглядит следующим образом:

  1. ac_retail наследуется от ac_default наследуется от luma
  2. ac_wholesale наследует от ac_default наследует от luma

Из того, что я могу сказать, рабочий процесс Grunt - это единственный рабочий процесс, который действительно подходит для разработки тем.Компиляция на стороне сервера и на клиенте слишком медленная для разработки.

1 Ответ

0 голосов
/ 30 января 2019

Наконец-то разобрался. В документации есть ошибки. Вам нужно указать файлы стилей родительских тем, даже если ваша дочерняя тема имеет собственные корневые исходные файлы, если вы хотите перекомпилировать styles-m.css и styles-l.css, когда дочерние темы меняют меньше файлов. Этот local-themes.js работал на меня:

>>'use strict';                                                                    
>>module.exports = {                                                               
      ac_default: {                                                                
          area: 'frontend',                                                        
          name: 'Ac/Default',                                                      
          locale: 'en_US',                                                         
          files: [                                                                 
              'css/styles-m',                                                      
              'css/styles-l',                                                      
          ],                                                                       
          dsl: 'less'                                                              
      },                                                                           
      ac_retail: {                                                                 
          area: 'frontend',                                                        
          name: 'Ac/Retail',                                                       
          locale: 'en_US',                                                         
          files: [                                                                 
              'css/styles-m',                                                      
              'css/styles-l',                                                      
          ],                                                                       
          dsl: 'less'                                                              
      },                                                                           
      ac_wholesale: {                                                              
          area: 'frontend',                                                        
          name: 'Ac/Wholesale',                                                    
          locale: 'en_US',                                                         
          files: [                                                                 
              'css/styles-m',                                                      
              'css/styles-l',                                                      
          ],                                                                       
          dsl: 'less'                                                              
      }                                                                            
  };
...