Magento Grunt子主题编译无法更新合并的样式文件

时间:2019-01-21 18:25:09

标签: magento gruntjs magento2

我已经按照以下说明设置了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'
    }
};

当更改子主题中的较少文件时,我的咕unt声观看成功触发:

➜  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工作流是唯一真正适合主题开发的工作流。服务器和客户端的编译速度太慢,无法用于开发。

2 个答案:

答案 0 :(得分:0)

最后弄清楚了。该文档有错误。您需要指定父主题样式文件,即使您的子主题具有它自己的根源文件,如果要在子主题较少的文件更改时重新编译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'                                                              
      }                                                                            
  };

答案 1 :(得分:0)

添加

'css/styles-m',                                                      
'css/styles-l',     

也为我修复了它。谢谢你