CSS

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

Minimize CSS and JavaScript files

To speed up the performance of your website, all CSS and JavaScript files should be minimized. That means, all CSS and JavaScript should delivered without unnecessary comments, spaces, line breaks and tabs. It should of course take place in the build process, otherwise your developers work is much harder! This tutorial shows how easily you can  minimize files, by using the YUI Compressor.

Precondition

Minimize one file

# Syntax to minimize CSS
$ java -jar yuicompressor-x.y.z.jar style.css -o style-min.css

# Syntax to minimize JavaScript
$ java -jar yuicompressor-x.y.z.jar script.js -o script-min.js

Minimize multiple files

# Syntax to minimize CSS
$ java -jar yuicompressor-x.y.z.jar -o '.css$:-min.css' *.css

# Syntax to minimize JavaScript
$ java -jar yuicompressor-x.y.z.jar -o '.js$:-min.js' *.js

For more options show the help!

# show help
$ java -jar yuicompressor-x.y.z.jar --help