Grunt uncss in wordpress theme

Question

I am trying to run grunt uncss in my WordPress custom theme. Below is my configuration file gruntfile.js. When I run grunt command, I get error

 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"

Above, I have used get_template_directory_uri() wordpress function to get the path to current theme but grunt cannot detect this PHP function as dynamic. So, how can I make this grunt config in gruntfile.js to make require.js file to see with correct path.

Thank you.

UPDATE

Below is my gruntfile.js inside theme directory.

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');
}

Also, I am using get_template_directory_uri() in footer.php file in theme directory.

Answer 1

I would say, the way you are trying to do does not work.

grunt:uncss is reading your files but does not execute them. Also, if it detects any other file url, it will check this as well.

In your case, you dynamically added require.js to your footer, but grunt:uncss does not know anything about PHP and therefore does not execute the get_template_directory_uri(). The resulting problem is, that uncss is grying to find fhe file at location in your error.

I'm not sure if uncss is also reading your function.php, if not you could register and enqueue your require.js there and try it again.

Here's an answer to a similar Problem, with same conclusion that uncss does not work with dynamic PHP files. https://stackoverflow.com/a/35583623/9184970

Also the answer suggests to generate html first and the run uncss, with a specific tutorial for Wordpress here https://gladdy.uk/blog/2014/04/13/using-uncss-and-grunt-uncss-with-wordpress/