Example Gulpfile

gulpfile.js

'use strict';

var gulp = require('gulp');
var stylus = require('gulp-stylus');
var sourcemaps = require('gulp-sourcemaps');
var prefix = require('gulp-autoprefixer');
var minifyCss = require('gulp-minify-css');
var rename = require('gulp-rename');
var browserSync = require('browser-sync');

var directories = {
    stylus: {
        input: './stylus/app.styl',
        output: {
            folder: './dist',
            fileName: 'app.css'
        }
    },
    minify: {
        input: './stylus/app.styl',
        output: {
            folder: './dist',
            fileName: 'app.min.css'
        }
    }
};

gulp.task('stylus', function () {
    return gulp
        .src(directories.stylus.input)
        .pipe(sourcemaps.init())
        .pipe(stylus())
        .pipe(prefix())
        .pipe(rename(directories.stylus.output.fileName))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest(directories.stylus.output.folder))
        .pipe(browserSync.stream());;
});

gulp.task('minify-css', function () {
    return gulp
        .src(directories.minify.input)
        .pipe(sourcemaps.init())
        .pipe(stylus())
        .pipe(prefix())
        .pipe(minifyCss())
        .pipe(rename(directories.minify.output.fileName))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest(directories.minify.output.folder));
});

gulp.task('serve', ['styles'], function () {
  browserSync.init({
    proxy: "localhost" // Setup your server here. By default: localhost:80
  });

  gulp.watch("assets/stylus/**/*.styl", ['stylus']);
  gulp.watch("dist/**/*.html").on('change', browserSync.reload);
});

gulp.task('default', ['stylus', 'minify-css']);