Social Network for Web Professionals

Webmaster Blog

Members blog at WebmaisterPro. Covering topics related to online marketing, SEO, web development as well as software reviews.

Grunt: What Does This Function Do To Uplift Your WordPress

Grunt


Grunt is a high-end JavaScript
based task runner that helps in streamlining the development process of WordPress plugins and how they act. It's an extremely flexible and extensible tool to maintain the work flow of WordPress plugins and enjoying a greater level of control over their entire process.

 

This guide will show you how Grunt can be used to handle tedious task and bring the fun into the PSD to WordPress theme conversion and some other development related tasks. But before we directly take you to the subject, let's first understand the basis of Grunt and why this tool is so helpful.

 

What is Grunt?

 

Grunt is an extremely versatile task runner capable of performing anything you could imagine. There is an extensive community behind the regular discovery and development of Grunt which help you to add edge to your projects. No matter, whether it's about minifying your files, performing testing related tasks, or editing, linking CSS files or anything that matters, Grunt has you covered.

 

What Grunt Can Do for You

 

The community of Grunt is incredibly strong and massive, which has lead to the development of a great deal of plugins. The tool speed up the development process of your WordPress and works great with Node.js packages.

 

A tool kit like Codekit does many of the same tasks, but Grunt goes further in providing you more control along with a huge library to work with it.

 

With so many plugins to choose from, Grunt is a fantastic framework that allows you convert anything in the manner most effective. It easily handles repetitive and often complicated tasks so that you don't have to deal with them.

 

In this post, we will demonstrate how Grunt can be used to change the way your WordPress site themes function and develop. But before going to the topic, let's discuss about the libraries that majority of the theme developers use while working with Grunt.

 

1. Compass

 

( https://github.com/gruntjs/grunt-contrib-compass )

 

Want to build flawless stylesheets on the fly? Then Compass is all what you need. Compass is basically a framework for the SASS pre-processor. It comes packed with catalogs of mixins and functions. Not only this, its sophisticated tools for spriting make developers more agile and smart.

 

 

2. Uglify JS

 

( https://github.com/gruntjs/grunt-contrib-uglify )

 

If you work with JavaScript quite frequently then you must be knowing the process of JavaScript minification and concatenation. Uglify JS is an extremely helpful library that compresses files so that your site loads faster.

 

 

3. Watch

 

( https://github.com/gruntjs/grunt-contrib-watch )

 

Watch is an extremely reliable tool built to watch changes within the file system. But instead of starting everything from the scratch when some changes are needed to introduce, it allows you to perfom a variety of things along with running multiple Grunt tasks.

 

4. JSHint

 

(https://github.com/gruntjs/grunt-contrib-jshint )

 

JS Hint is a useful dependency action that allows you check the errors of your files in an easy way.

 

 

5. ImageMin

 

( https://github.com/gruntjs/grunt-contrib-imagemin )

 

Get rid of the slow loading websites and images by using ImageMin dependency.

 

 

6. Rsync

 

( https://github.com/jedrichards/grunt-rsync )

 

Use Rsync for performing server-to-server tasks without having any need to use a separate program.

 

Benefits You Can Drive Using Grunt

 

  • Super easy compilation of LESS ans SASS files

  • Minification and concatenation without any need of plugin

  • Fewer request made to the server

  • Promises the validity of JavaScript

  • Multiple members can work together on your project using the same build script

  • Code can be optimized for production use on servers

 

 

Grunt Commands

 

  • grunt dev- used for compiling LESS to CSS, also concatenate and verify JavaScript.

  • grunt watch- Compile assets when any kind of file change is being introduced

  • grunt built- Develop minified assets used in the non-development environment.

 

This is how the Grunt.js file looks :

 

 

'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'

];

 

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

}

}

},

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 4.1', 'android 4.2', 'opera 12']

},

dev: {

options: {

map: '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/*.less',

'assets/less/**/*.less'

],

tasks: ['less:dev', 'autoprefixer:dev']

},

js: {

files: [

'<%= 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'

]

}

}

});

 

// 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'

]);

};

 

Install Grunts To Use It with Roots

 

Below is the series of steps provided which you need to follow to install Grunts to use it with roots.

 

  • First, install grunt-cli with npm install -g grunt-cli.

  • Now, go to the theme directory and run npm install. Npm will call for package.json and automatically start install all the essential dependencies. Also, it will automatically run 'bower install', which is a kind of dependency in the form of bower.install.

Once you are done with these steps, you'll be able to run several grunts commands directly from the command line.

 

Hopefully, you find the article useful and easy to follow. You'll love the flexibility of Grunt and will keep using it to speed up your WordPress theme development.

 

Rate this blog entry:
0
Our Promise4 Ways a Business Should be Planning fo...
Modular Data Centre and Containerized Computing

Comments

 
No comments yet
Already Registered? Login Here
Guest
Saturday, 31 October 2020
If you'd like to register, please fill in the username and name fields.

Captcha Image