WordPress 主题中的 Grunt uncss

Question

我正在尝试在我的 WordPress 自定义主题中运行 grunt uncss。下面是我的配置文件gruntfile.js。当我运行grunt 命令时，出现错误

 Running "uncss:dist" (uncss) task
 Error: Could not load script: "file:///D:/www/website-wp/wp-content/themes/theme2021/%3C?=get_template_directory_uri()?%3E/assets/js/require.js"

上面，我使用get_template_directory_uri() wordpress 函数来获取当前主题的路径，但是 grunt 无法检测到这个 PHP 函数是动态的。那么，如何在gruntfile.js 中进行这个 grunt 配置以使 require.js 文件以正确的路径查看。

谢谢。

更新

下面是我在主题目录中的 gruntfile.js。

module.exports = function(grunt) {
  grunt.initConfig({
    exec: {
      get_grunt_sitemap: {
         command: 'curl --silent --output sitemap.json http://localhost/website-wp/?show_sitemap'
      }
    },
    uncss: {
      dist: {
        options: {
          ignore: [/\w\.in/,
                    ".fade",
                    ".collapse",
                    ".collapsing",
                    /(#|\.)navbar(\-[a-zA-Z]+)?/,
                    /(#|\.)dropdown(\-[a-zA-Z]+)?/,
                    /(#|\.)(open)/,
                    ".modal",
                    ".modal.fade.in",
                    ".modal-dialog",
                    ".modal-document",
                    ".modal-scrollbar-measure",
                    ".modal-backdrop.fade",
                    ".modal-backdrop.in",
                    ".modal.fade.modal-dialog",
                    ".modal.in.modal-dialog",
                    ".modal-open",
                    ".in",
                    ".modal-backdrop",
                    /expanded/,/js/,/wp-/,/align/,/admin-bar/],
            stylesheets  : ['/dist/bootstrap/css/bootstrap.min.css', 'style.css','/css/minified/main.css','/css/minified/media.css'],
            ignoreSheets : [/fonts.googleapis/,/js.hsforms.net/,/require.js/],
            // urls         : [], //Overwritten in load_sitemap_and_uncss task
          },
        // files: {
        //   'assets/compiled/style.css': ['http://localhost/website-wp/']
        // },
         files: {
          'style.clean.css': ['**/*.php']
        }
      }
    }
  });

  grunt.loadNpmTasks('grunt-exec');
  grunt.loadNpmTasks('grunt-uncss');
 

  grunt.registerTask('load_sitemap_json', function() {
    var sitemap_urls = grunt.file.readJSON('./sitemap.json');
    grunt.config.set('uncss.dist.options.urls', sitemap_urls);
  });

  grunt.registerTask('deploy',
  ['exec:get_grunt_sitemap','load_sitemap_json','uncss:dist']);
   
  

  grunt.registerTask('default', 'uncss');
}

另外，我在主题目录的footer.php文件中使用get_template_directory_uri()。

Answer 1

我会说，你尝试做的方式行不通。

grunt:uncss 正在读取您的文件但不执行它们。此外，如果它检测到任何其他文件 url，它也会检查它。

在您的情况下，您将 require.js 动态添加到页脚，但 grunt:uncss 对 PHP 一无所知，因此不会执行 get_template_directory_uri()。由此产生的问题是，uncss 正在努力在您的错误位置找到 fhe 文件。

我不确定 uncss 是否也在读取你的 function.php，如果没有，你可以在那里注册并加入你的 require.js，然后再试一次。

这是一个类似问题的答案，同样的结论是 uncss 不适用于动态 PHP 文件。 https://stackoverflow.com/a/35583623/9184970

另外答案建议先生成html然后运行uncss，这里有专门的Wordpress教程https://gladdy.uk/blog/2014/04/13/using-uncss-and-grunt-uncss-with-wordpress/