0

I am using grunt-uncss on MAMP with a WordPress site. I have taken all my css files and combined them into one file.

result: one url takes 40 minutes to complete. That can't be efficient. In addition uncss just spits out the same css out that it started with.

Many of the errors are "ReferenceError: Can't find variable: jQuery" but its like PhantomJS/UnCSS is trying to parse inline javascript?

Here are some others:

SyntaxError: Unexpected token '%'

local:193 in setContent :2 SyntaxError: Invalid escape in identifier: '\'

local:427 in setContent :2 SyntaxError: Unexpected token '<'

local:891 in setContent :2 SyntaxError: Unexpected token ','

I have tried different approaches including addition more time (timeout) for jQuery to load, etc as well as goo'gling for the past seven hours. I am pretty sure the problem is with PhantomJS but am not as familiar with it. Looking for help

Here is my gruntfile

module.exports = function(grunt) {

   require('time-grunt')(grunt);

  // 1. All configuration goes here 
     grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),

      jshint: {
        all: ['gruntfile.js']
      },

  exec: {
      get_grunt_sitemap: {
         command: 'curl --silent --output sitemap.json http://localhost:8888/applus/?show_sitemap'
      }
    },

  uncss: {
     dist: {
        options: {
      ignore       : [
                /expanded/,
                /js/,
                /wp-/,
                /align/,
                /admin-bar/,
                /\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",
                '.hidden-xs', 
                'hidden-sm'

                ],
      stylesheets  : ['wp-content/themes/vest/css/consolidated.css'],
      ignoreSheets : [/fonts.googleapis/],
      urls         : [], //Overwritten in load_sitemap_and_uncss task
    },
    files: {
      'wp-content/themes/vest/style.test.css': ['**/*.php']
    }
  }
}

  });

// 3. Where we tell Grunt we plan to use this plug-in.
      grunt.loadNpmTasks('grunt-contrib-jshint');
      grunt.loadNpmTasks('grunt-exec');   
      grunt.loadNpmTasks('grunt-uncss');

// 4. Where we tell Grunt what to do when we type "grunt" into the terminal.
      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'['jshint','exec:get_grunt_sitemap','load_sitemap_json','uncss:dist']);  
 };
user3795286
  • 136
  • 1
  • 14

1 Answers1

0

Ok, so to answer my own question. It seems that I misconfigured the stylesheets and files urls for MAMP? As soon as I created hard links to the files. Everything seemed to work except for those events that are triggered by user interaction.

Here are the changes I made: 

stylesheets  : ['http://localhost:8888/wp-content/themes/vest/css/consolidated.css'],



files: [{
                nonull: true,
                src: ['http://localhost:8888/applus'],
                dest: '/Applications/MAMP/htdocs/applus/wp-content/themes/cannavest/uncss-style.css'
    }]

Tip: For WordPress you should take a look at your page source and copy all your css into one css file in the specific order they show up in the page source (hence - consolidated.css). That way you can maintain as much css inheriting as your finished site.

user3795286
  • 136
  • 1
  • 14