The less work you have to do, the easier your job becomes.

In relation to above quote, GruntJS does all the common work for you, enabling you to focus on other complex logics in the task. That is what GruntJS is considered as Task Runner. Lets assume a scenario:

You are creating a theme, or lets say a plugin, and you write lot of JavaScript, and design your theme or plugin using SASS. And lets say you are working remotely using GIT. Your projects files grows heavier and you have to go through script check, translation, minification, and compilation each time you do the update. Sooner or later, this will become your headache. Thus, GruntJS can make your world a lot more simpler. It can check error in the code, minify your codes automatically, compile your sass file, and translate your WordPress themes/plugin. And all of the above, it can deploy your themes/plugin by removing unwanted files/folders from your project.

So, how do we start?

First of all, you need to setup Node Package Manager (shortly, npm) in your computer.

  1. Download Node package manager and install it.
  2. Restart your PC
  3. Open your terminal / command prompt
  4. Test if your system has done setup correctly – Type:
  5. You probably will see some kind of usage guide
  6. Now install command line interface (CLI) for grunt:
  7. After you complete these task, you are ready to go with GruntJS

 

Now that you have npm on your computer, you can setup GruntJS for your project. To do so, you need to create two files first: package.json and Gruntfile.js

Setting up project for Automation

  1. Go to the root folder of your plugin/theme and create package.json file. The format of file should be similar to this one:
  2. As Grunt is a taskrunner, you need to mention what kinds of tasks do you want grunt to run. So again, open your terminal (If you had it closed) and run following command:
  3. Above command will install task for sass. If you need to install task for WordPress localization, you need to run following command:
  4. After you have done installing tasks, re-open package.json file, you will see, the tasks are added as devDependencies in it.

As a final task, you need to create a Gruntfile that tells what action do you need to carry out for the project.

Setting up Gruntfile.js

  1. Now that we have a couple of Grunt tasks installed, let’s start using them. So create Gruntfile.js in the same directory where package.json is found
  2. Specify our tasks and configure them by adding following line in Gruntfile.js:
  3. Now, we need to load our tasks so we can execute them. So, add loadNpmTasks() function for each task as follows:
  4. The next thing we need to do is set up the configuration for our installed Grunt tasks. We need to use the initConfig function like this:
  5. Now, that’s all. You are ready to run a grunt command

 

That’s all for today. If you successfully have came towards the end, then you have no problem to increase your knowledge. GruntJS is itself a vast topic to be included in this tutorial. So, I will be covering more about it later on.

Stay tuned.

Share:


About the Author



Leave a Reply

Your email address will not be published. Required fields are marked *

Premium WordPress Themes