Test HTTP Requests Tools Blog Learn Quizzes Smile API Log In / Sign Up
Test HTTP Requests Tools Blog Learn Quizzes Smile API Log In / Sign Up
« Return to the tutorials list
We have updated the website and our policies to make sure your privacy rights and security are respected.
Click here to learn more about the way our website handles your data.

Remove this message.

Installing and using Grunt for your daily tasks on Ubuntu

Daniel Gheorghe Difficulty: 25 / 50 Tweet

Although I am more of a PHP guy than a server-side JavaScript fan... I acknowledge the fact that some things are done better when using the right tool for the job.

Minifying JavaScript and compiling LESS files into CSS are two jobs that I do with Grunt because it works flawlessly. In today's tutorial I will show you how you can do that on an Ubuntu Server.

First thing we need to do is to install Node, NPM and Grunt:

  sudo apt-get install nodejs-legacy
  sudo apt-get install npm
  npm install -g grunt-cli

Once you've installed the above components, you can navigate to your project folder and start creating your app. To define your application and its dependencies, you need to create a file called package.json in the root folder of your project. Here's how the JSON should be structured:

    "name": "The name of your app",
    "version": "0.1.0",
    "devDependencies": {}

Next step is to install (build) all the node modules you'll need: grunt, grunt-contrib-uglify and grunt-contrib-less. Remember to append -save-dev to all npm install commands because this will automatically update your package.json file, adding the newly installed package to your dependencies.

  npm install grunt --save-dev
  npm install grunt-contrib-uglify --save-dev
  npm install grunt-contrib-less --save-dev

Finally, you need to create a Gruntfile. This is a configuration file - it tells Grunt which tasks it should run when a specific command is typed. The Gruntfile should also contain a JSON used to define the actual outcome of running a task. In our case, this translates to telling grunt that it should compile a LESS file into a css file and minify the JavaScript code from one file and place it into another. Here's how the Gruntfile.js should look like:

  module.exports = function(grunt) {
    // Project configuration.
      pkg: grunt.file.readJSON('package.json'),
          src:['../scriptdev.js'], // this should be replaced with the path to your development file
          dest:'../script.js' // this should be replaced with the path to your minified file
      less: {
        production: {
          options: {
            cleancss: true,
          files: {
            "../style.css": "../style.less" // replace these with the correct paths to your less and css files
    // Load the plugins (packages) that provide the "uglify" and "less compiler" tasks.
    // Task(s).
    grunt.registerTask('default', ['uglify']);
    grunt.registerTask('styles', ['less']);

Now that you're done, run the commands below to compile your LESS files and minify your JavaScript respectively.

    grunt uglify
    grunt less

Hope you liked this. If you have any questions just ask in the comments area.