CSSLint with Grunt on Debian

This tutorial gives an tiny insight into CSSLint with Grunt on Debian. After that you should be able, to implement more Grunt tasks for your project.

Installation

As root or sudo user install needed packages!

# update your system
$ apt-get update && apt-get upgrade

# install nodejs and npm
$ apt-get install -y nodejs-legacy npm

# install grunt-cli (global)
$ npm install -g grunt-cli

Check the installation of all needed tools.

# show different versions
$ nodejs --version
$ npm --version
$ grunt --version

Create a new project

As “normal” user create a new project and install the needed plugin.

# create new folder
$ mkdir TestProject

# change directory
$ cd TestProject/

# interactively create a package.json file
$ npm init

# install the csslint plugin
$ npm install grunt-contrib-csslint --save-dev

If no problems occurred, the package.json file should look like:

{
  "name": "TestProject",
  "version": "0.0.1",
  "description": "my example project",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "lupin3000",
  "license": "ISC",
  "devDependencies": {
    "grunt": "^0.4.5", "grunt-contrib-csslint": "^0.4.0"
  }
}

Create a css folder and a css file with some mistakes like:

$ mkdir css
$ vim css/example.css

The example.css file contains some issues!

html, body {
  margin: 0;
  padding: 0 
  borde: 0;
}

In the last step we create the Gruntfile.js

# create Gruntfile.js
$ vim Gruntfile.js
module.exports = function(grunt) {
  grunt.initConfig({
    csslint: {
      // define the files to lint
      files: ['css/*.css'],
      strict: {
        options: {
          "import": 2
        }
      }
    }
  });
  grunt.loadNpmTasks("grunt-contrib-csslint");
};

Thats all, now run just the command and see the results.

# run csslinter
$ grunt csslint