Tools Blog Learn Quizzes Smile API Log In / Sign Up
Tools Blog Learn Quizzes Smile API Log In / Sign Up
« Return to the tutorials list
We have updated our privacy policy to let you know that we use cookies to personalise content and ads. We also use cookies to analyse our traffic and we share information about your use of our site and application with our advertising and analytics partners. By using this website or our application you agree to our use of cookies. Learn more about the way this website uses cookies or remove this message.

Installing and using Grunt for your daily tasks on Ubuntu

Difficulty: 25 / 50 Tweet
gruntjs

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.
    grunt.initConfig({
      pkg: grunt.file.readJSON('package.json'),
      uglify:{
        build:{
          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.
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-less');
    // 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.

comments powered by Disqus