Stylus:

Stylus is a revolutionary new language, which provide an efficient and expressive way to generate dynamic CSS. It supports both syntax and normal style indented CSS.

Gulp:

GulpJS is an tasks automator written in JavaScript and it runs on Node.js that follows the same philosophy as Grunt. GulpJS improves in ease the programming and speed when performing tasks.

What do we need to compile our Stylus?

1) We need to download Node.js for the Stylus and Gulp installation.

2) Create a file with the name package.json and type the following:

{
  "name": "Stylus",
  "version": "1.0.0",
  "description": "Creando css con Stylus",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": 'David Paredes",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-notify": "^2.2.0",
    "gulp-stylus": "^2.1.0"
  },
  "dependencies": {
    "gulp-concat": "^2.6.0",
    "gulp-concat-css": "^2.3.0",
    "gulp-uglify": "^2.0.0",
    "install": "^0.8.1",
    "npm": "^3.10.8"
  }
}

3) We open our terminal and we head to our project folder and run the npm install command and wait for dependencies to be download.

4) Create a file with the name gulpfile.js and write the following.

var gulp = require('gulp');
var notify = require('gulp-notify');
var stylus = require('gulp-stylus');

gulp.task('stylus', function () {
    return gulp.src('./path/*.styl')
      .pipe(stylus())
      .pipe(notify("Stylus was compiled correctly!"));
});

gulp.task('watch', function () {
    gulp.watch('./path/*.styl', ['stylus']);
});

gulp.task('default', ['watch']);

5) To compile our Stylus we execute the command.

 gulp

What is the Stylus syntax ?

Stylus:

body
  color white
  background green
  font-size 15px

Stylus result in CSS:

body {
  color: white;
  background: green;
  font-size: 15px;
}