Usando gulp para: preprocesar html con jade, css con stylus. Además es util para livereload

gulpfile.js

var gulp = require('gulp'),
    connect = require('gulp-connect'),
    jade = require('gulp-jade'),
    stylus = require('gulp-stylus'),
    watch = require('gulp-watch');

var path = {
  css: './dist/css/',
  html: './dist/',
  jade: ['./dist/jade/**/*.jade'],
  stylus: ['./dist/stylus/**/*.styl'],
};

gulp.task('connect', function () {
  connect.server({
    root: 'dist',
    hostname: '0.0.0.0',
    port: 8001,
    livereload: true,
  });
});

/* Esta tarea hace watch sobre los ficheros .jade
que se encuentren en la carpeta 'dist/jade' del proyecto */
gulp.task('jadeTOhtml', function () {
  gulp.src(path.jade)
    .pipe(jade({pretty: true}))
    .pipe(gulp.dest(path.html))
    .pipe(connect.reload());
});

/* Esta tarea recoge los ficheros .styl (de Stylus)
que se encuentren en la carpeta ‘dist/styles’ del proyecto,
los preprocesa a CSS, los minifica en un solo fichero
y lo deja en la carpeta ‘dist/css’ */
gulp.task('stylTOcss', function () {
  gulp.src(path.stylus)
    .pipe(stylus())
    .pipe(gulp.dest(path.css))
    .pipe(connect.reload());
});

gulp.task('watch', function () {
  gulp.watch(path.jade, ['html']);
  gulp.watch(path.stylus, ['stylus']);
});

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