Skip to content

Instantly share code, notes, and snippets.

@cfxd
Last active April 24, 2019 03:59
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save cfxd/39f410ae02820d1675ff to your computer and use it in GitHub Desktop.
Save cfxd/39f410ae02820d1675ff to your computer and use it in GitHub Desktop.
Remove Unused CSS from WordPress Automatically with Grunt. See http://cfxdesign.com/remove-unused-css-from-roots-theme-automatically-with-grunt/
{
"name": "roots",
"version": "7.0.0",
"author": "Ben Word <ben@benword.com>",
"homepage": "http://roots.io",
"repository": {
"type": "git",
"url": "git://github.com/roots/roots.git"
},
"bugs": {
"url": "https://github.com/roots/roots/issues"
},
"licenses": [
{
"type": "MIT",
"url": "http://opensource.org/licenses/MIT"
}
],
"scripts": {
"postinstall": "node_modules/.bin/bower install"
},
"engines": {
"node": ">= 0.10.0"
},
"devDependencies": {
"bower": "~1.3.8",
"grunt": "~0.4.5",
"grunt-autoprefixer": "~0.8.1",
"grunt-contrib-concat": "~0.4.0",
"grunt-contrib-jshint": "~0.10.0",
"grunt-contrib-less": "~0.11.3",
"grunt-contrib-uglify": "~0.5.0",
"grunt-contrib-watch": "~0.6.1",
"grunt-exec": "~0.4.6",
"grunt-modernizr": "~0.5.2",
"grunt-uncss": "~0.3.5",
"grunt-wp-assets": "~0.2.6",
"load-grunt-tasks": "~0.6.0",
"time-grunt": "~0.4.0"
}
}
less: {
dev: {
files: {
'assets/css/main.css': [
'assets/less/main.less'
]
},
options: {
compress: false,
// LESS source map
// To enable, set sourceMap to true and update sourceMapRootpath based on your install
sourceMap: true,
sourceMapFilename: 'assets/css/main.css.map',
sourceMapRootpath: '/app/themes/roots/'
}
},
build: {
files: {
'assets/css/main.min.css': [
'assets/less/main.less'
]
},
options: {
compress: true
}
},
build_uncss: {
files: {
'assets/css/main.min.css': [
'assets/less/main.less'
]
},
options: {
compress: false
}
},
compress: {
files: {
'assets/css/main.min.css': [
'assets/css/main.min.css'
]
},
options: {
compress: true
}
}
},
<?php
function show_sitemap() {
if(WP_ENV === 'development' && isset($_GET['show_sitemap'])) {
$the_query = new WP_Query(array('post_type' => 'any', 'posts_per_page' => '-1', 'post_status' => 'publish'));
$urls = array();
while($the_query->have_posts()) {
$the_query->the_post();
$urls[] = get_permalink();
}
die(json_encode($urls));
}
}
add_action('template_redirect', 'show_sitemap');
?>
exec: {
get_grunt_sitemap: {
command: 'curl --silent --output sitemap.json '+domain+'?show_sitemap'
}
},
uncss: {
dist: {
options: {
ignore : [/expanded/,/js/,/wp-/,/align/,/admin-bar/],
stylesheets : ['assets/css/main.min.css'],
ignoreSheets : [/fonts.googleapis/],
urls : [], //Overwritten in load_sitemap_and_uncss task
},
files: {
'assets/css/main.min.css': ['**/*.php']
}
}
}
'use strict';
module.exports = function(grunt) {
// Load all tasks
require('load-grunt-tasks')(grunt);
// Show elapsed time
require('time-grunt')(grunt);
var jsFileList = [
'assets/vendor/bootstrap/js/transition.js',
'assets/vendor/bootstrap/js/alert.js',
'assets/vendor/bootstrap/js/button.js',
'assets/vendor/bootstrap/js/carousel.js',
'assets/vendor/bootstrap/js/collapse.js',
'assets/vendor/bootstrap/js/dropdown.js',
'assets/vendor/bootstrap/js/modal.js',
'assets/vendor/bootstrap/js/tooltip.js',
'assets/vendor/bootstrap/js/popover.js',
'assets/vendor/bootstrap/js/scrollspy.js',
'assets/vendor/bootstrap/js/tab.js',
'assets/vendor/bootstrap/js/affix.js',
'assets/js/plugins/*.js',
'assets/js/_*.js'
];
var domain = 'http://example.dev/';
grunt.initConfig({
jshint: {
options: {
jshintrc: '.jshintrc'
},
all: [
'Gruntfile.js',
'assets/js/*.js',
'!assets/js/scripts.js',
'!assets/**/*.min.*'
]
},
less: {
dev: {
files: {
'assets/css/main.css': [
'assets/less/main.less'
]
},
options: {
compress: false,
// LESS source map
// To enable, set sourceMap to true and update sourceMapRootpath based on your install
sourceMap: true,
sourceMapFilename: 'assets/css/main.css.map',
sourceMapRootpath: '/app/themes/roots/'
}
},
build: {
files: {
'assets/css/main.min.css': [
'assets/less/main.less'
]
},
options: {
compress: true
}
},
build_uncss: {
files: {
'assets/css/main.min.css': [
'assets/less/main.less'
]
},
options: {
compress: false
}
},
compress: {
files: {
'assets/css/main.min.css': [
'assets/css/main.min.css'
]
},
options: {
compress: true
}
}
},
concat: {
options: {
separator: ';',
},
dist: {
src: [jsFileList],
dest: 'assets/js/scripts.js',
},
},
uglify: {
dist: {
files: {
'assets/js/scripts.min.js': [jsFileList]
}
}
},
autoprefixer: {
options: {
browsers: ['last 2 versions', 'ie 8', 'ie 9', 'android 2.3', 'android 4', 'opera 12']
},
dev: {
options: {
map: {
prev: 'assets/css/'
}
},
src: 'assets/css/main.css'
},
build: {
src: 'assets/css/main.min.css'
}
},
modernizr: {
build: {
devFile: 'assets/vendor/modernizr/modernizr.js',
outputFile: 'assets/js/vendor/modernizr.min.js',
files: {
'src': [
['assets/js/scripts.min.js'],
['assets/css/main.min.css']
]
},
uglify: true,
parseFiles: true
}
},
version: {
default: {
options: {
format: true,
length: 32,
manifest: 'assets/manifest.json',
querystring: {
style: 'roots_css',
script: 'roots_js'
}
},
files: {
'lib/scripts.php': 'assets/{css,js}/{main,scripts}.min.{css,js}'
}
}
},
watch: {
less: {
files: [
'assets/**/*.less'
],
tasks: ['less:dev', 'autoprefixer:dev']
},
js: {
files: [
jsFileList,
'<%= jshint.all %>'
],
tasks: ['jshint', 'concat']
},
livereload: {
// Browser live reloading
// https://github.com/gruntjs/grunt-contrib-watch#live-reloading
options: {
livereload: false
},
files: [
'assets/css/main.css',
'assets/js/scripts.js',
'templates/*.php',
'*.php'
]
}
},
exec: {
get_grunt_sitemap: {
command: 'curl --silent --output sitemap.json '+domain+'?show_sitemap'
}
},
uncss: {
dist: {
options: {
ignore : [/expanded/,/js/,/wp-/,/align/,/admin-bar/],
stylesheets : ['assets/css/main.min.css'],
ignoreSheets : [/fonts.googleapis/],
urls : [], //Overwritten in load_sitemap_and_uncss task
},
files: {
'assets/css/main.min.css': ['**/*.php']
}
}
}
});
// Register tasks
grunt.registerTask('default', [
'dev'
]);
grunt.registerTask('dev', [
'jshint',
'less:dev',
'autoprefixer:dev',
'concat'
]);
grunt.registerTask('build', [
'jshint',
'less:build',
'autoprefixer:build',
'uglify',
'modernizr',
'version'
]);
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('build_uncss', [
'jshint',
'less:build_uncss',//compile LESS without compression
'exec:get_grunt_sitemap',//get sitemap
'load_sitemap_json',//load sitemap into uncss options
'uncss:dist',//run uncss (write results back into main.min.css)
'less:compress',//compress main.min.css
'autoprefixer:build',//finish remaining build tasks as before
'uglify',
'modernizr',
'version'
]);
};
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('build_uncss', [
'jshint',
'less:build_uncss',//compile LESS without compression
'exec:get_grunt_sitemap',//get sitemap
'load_sitemap_json',//load sitemap into uncss options
'uncss:dist',//run uncss (write results back into main.min.css)
'less:compress',//compress main.min.css
'autoprefixer:build',//finish remaining build tasks as before
'uglify',
'modernizr',
'version'
]);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment