Compiling from the command line

Some of you might prefer not to have to use a standalone application to compile Less code task; after all, who needs to learn yet another application in order to perform a task that can easily be automated and run in the background, right?

Absolutely; instead of using a standalone compiler, we can use the command line to perform the same operation using the JavaScript-based platform, which is Node.js, available at http://www.nodejs.org. Versions of this application are available for the Windows, Linux, Mac, and even SunOS platforms. Otherwise, you can always try compiling from the source if you are feeling adventurous! Let's take a look at how we can use this in more detail.

To download and install Node.js, perform the following steps:

  1. Browse http://www.nodejs.org, and click on Download from the main page; this should automatically determine the right version for your platform. At the time of writing this, the latest version for Windows is node-v0.10.24-x86.msi.
  2. Double-click on the installer to begin the process; you will see the following welcome screen. Click on Next.
  3. On the next screen, select the I accept the terms in the License Agreement checkbox, and then click on Next.
  4. At this point, we need to choose the location for where we will install Node. For the purposes of this book, we will assume that it will be installed in the default location of c:\wamp, so go ahead and click on Next.
  5. On the next screen, you can select from a number of options in order to configure Node. This isn't necessary for the purposes of running the exercises in this book, so we will simply click on Next.

We're now ready to complete the installation, so click on Install, and wait for it to complete. Once this is completed, Node is installed and is ready for us to use. We are now ready to install Less for the command line, which we will cover in the next chapter, which is Chapter 3, Getting Started with Less.

Note

If you are interested in learning more about Node.js, then you might like to peruse the book Mastering Node.js, Sandro Pasquali, published by Packt Publishing.

Watching for changes to Less files

As we will see in the next chapter, it is a simple process to compile Less from the command line; we can open a command prompt, type in a simple command, and then press Enter to let it run.

The trouble is that we have to do this every time. After a while, this will get tedious, to say the least! It's something we can easily fix—we first need to install Grunt's command-line interface before taking it a step further by setting Grunt to automatically watch out for, and recompile, any changes to our Less source files.

Note

There is an alternative watch mode available in Less, called Watch. This still requires manual work to configure it; we will take a look at it in more detail in Chapter 3, Getting Started with Less.

In the following example, we'll add support for Less by installing a package called grunt-contrib-less. Let's start by creating a folder for our project at the root of the C: drive, called lessjs. Within this folder, create a new file called package.json, and add the following code:

{
  "name": "my_grunt_project",
  "version": "0.0.1",
  "devDependencies": {

  }
}

Next, fire up a command prompt and enter the following command:

npm install -g grunt --save-dev

This will download and install a number of additional packages; the --save-dev parameter will add any dependencies to the package.json file automatically.

If we take a look at the lessjs folder, we will see our package.json file; if we open it in a text editor, it will look something like this code:

{
  "name": "my-project-name",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.2",
    "grunt-contrib-less": "~0.8.3",
    "grunt-contrib-watch": "~0.5.3"
  }
}

If the download is complete with no errors recorded, then run this command:

npm install -g grunt-cli

Add the following code to a new file, and save it in the project folder as gruntfile.js. We will go through the file in sections in order to understand what each part does:

module.exports = function(grunt) {
  grunt.initConfig({
    less: {
      src: {
        expand: true,
        src:    "*.less",
        ext:    ".css"
      }
    }
  },

We start the file with a standard Grunt exports statement; here, we initialize Grunt by setting src to look for Less files and compile them into CSS files. We've set Grunt to not compress the CSS files when compiled using the expand attribute, which is set to true. This makes them easy to read while we are still developing, although in reality, we will look to compress the files in a production environment in order to save on bandwidth:

  watch: {
      styles: {
      options: { spawn: false },
        files: [ "*.css", "*.less"], 
        tasks: [ "less" ]
      }
  }
  });

As we are defining more than one task, we would ordinarily have to enter the tasks at the command prompt individually. Instead, we can combine all of the subtasks that we define. We can then run them as default when entering the command grunt at the command line, which help saves time:

  grunt.loadNpmTasks('grunt-contrib-less');
  grunt.loadNpmTasks('grunt-contrib-watch');

  // the default task can be run just 
  // by typing "grunt" on the command line
  grunt.registerTask('default', ['watch']);
};

Start a command prompt, switch to the project folder, and enter npm install at the command prompt. This will download and install a number of additional packages. When this is complete, enter grunt at the command prompt. Grunt will begin watching for any changes, as shown in this example:

Any changes made will force an automatic recompilation of the Less file.

Tip

If you would like to dig into the source code for these packages, then you will find many of them on GitHub at https://github.com/gruntjs.

As time moves on, and you become more accustomed to developing with Less, you might like to try some of the other watcher packages that are available from the Node Package Manager website at https://npmjs.org, such as the following examples:

Now that we have Less installed and compiled automatically using Grunt, we can skip to the next chapter in order to create some files in our normal text editor, and then compile them manually. This will work perfectly well, but we can automate the compilation process even further. Let's see how we can do this by adding support to a text editor such as Notepad++ so that we can compile the files directly from within the editor.

Compiling Less files directly from text editors

There are hundreds of text editors available for use; some are free or open source, while others will be available at a cost. A good example of a free editor is Notepad++; the current version is 6.5.3 at the time of writing this and can be downloaded from http://notepad-plus-plus.org/download/v6.5.3.html.

For now, we'll get it set up and ready for use. You will see it in action in Chapter 3, Getting Started with Less, when we use it to compile code from the editor.

Download the installer for Notepad++, and then double-click on it to launch the installation process. Click on Next to accept each default setting, which will suffice for our needs. When the installation is complete, start Notepad++, and then click on Run from the Run menu in order to launch the Run dialog, and add the following line (including the quotes):

"C:\Program Files (x86)\nodejs\node_modules\.bin\lessc.cmd" -x "$(FULL_CURRENT_PATH)" > "$(CURRENT_DIRECTORY)\$(NAME_PART).css"

Click on Save to add the run command to the list of existing preset commands; in the Shortcut dialog, choose the CTRL + L shortcut and add Compile LESS files for the command, and then click on OK.

When the Shortcut window is closed, click on Save to save the changes. For now, click on Cancel to close the window. We're not ready to run our shortcut yet—this will happen in the next chapter. Notepad++ is now set up so that we are ready to compile any changes to Less files from within the application.

Installing the compilation support via a package

So far, we've seen how you can set up an editor such as Notepad++, but we're not limited to having to wire up every editor using this technique. For some editors, an extension or package has already been created for this purpose, so the installation will be simplified. One such example is Sublime Text—there is a package that exists, which we can install in order to provide support for Less.

Start by firing up Sublime Text, and then press Shift + Ctrl + P to bring up Package Manager, which we installed earlier in this chapter, and then enter Package Control: Install Package and press Enter.

Next, enter lesscss—we need to install the Less2CSS package, so when this appears in the autocomplete, click on it and press Enter:

At this point, Sublime Text will install the package, which will take a few moments—the confirmation will appear in the status bar when it is successfully installed. We're now ready to compile Less files directly from within Sublime Text—we'll be using this feature in the next chapter.

上一章目录下一章