Using GruntJS in WordPress?
Yes yes .. there are already dozens of articles on how to start with Grunt, as it will automate your frontend tasks like will improve your workflow and all this magic with a single .js file and some npm install.
It is precisely for this reason that I will not teach you how to install and configure Grunt generically. I’ll show how I used it in the new WordPress theme Web Brushstrokes blog.
The structure
The basics are:
module.exports = function (grunt) {
‘use strict’;
grunt.initConfig({
pkg: grunt.file.readJSON(‘package.json’),
uglify: {
//…
},
cssmin: {
//…
}
});
grunt.loadNpmTasks(‘grunt-contrib-uglify’);
grunt.loadNpmTasks(‘grunt-contrib-cssmin’);
grunt.registerTask(‘default’, [‘uglify’, ‘cssmin’]);
};
Very simple. Ai am using 2 grunt plugins . The uglify to minificar javascript, and cssmin to … ( u know ne ?! )
Note that within the initconfig I call each of the plugins I want to use the name, and then carry them there in loadNpmTasks , and then still add these tasks as part of the default routine in registerTask , this causes the run just grunt at the terminal, perform these two tasks .
And by turning grunt CSS min run only the task of CSS, for example.
plugins
They are well documented and are all on Github . Read the README them and see examples of use and advanced configuration options. gruntjs / grunt -contrib – uglify
The policy files
That part I found beautiful, vc just on one side ( in the key of json ) informs the target file, and the other side ( value ) announces an array of files that are concatenated and minificados within it.
files: {
‘javascript/all.min.js’: [‘src/javascript/social.js’, ‘src/javascript/prettify.js’, ‘src/javascript/all.js’]
}
And the same goes to the CSS.
To run on your WordPress theme
Copy our Gruntfile.js and add to your theme, do not forget to pick up the npm packages ( grunt plugins) beyond our package.json
“devDependencies”: {
“grunt”: “~0.4.2”,
“grunt-contrib-uglify”: “~0.3.2”,
“grunt-contrib-cssmin”: “~0.7.0”
},
Pedro used the banner of policy cssmin plugin to add the initial comments of the style.css file, so the CSS of your theme is perfect and remains valid for WordPress.
