Using WordPress not GruntJS

Using WordPress not GruntJS

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.



LEAVE A REPLY

Please enter your comment!
Please enter your name here