Stylus with gulp

gulpfile.js

// jshint asi: true
var gulp         = require('gulp')                    // the main guy
var clone        = require('gulp-clone')              // used to fork a stream
var notify       = require('gulp-notify')             // OS-level notifications
var rename       = require('gulp-rename')             // rename files in a stream
var stylus       = require('gulp-stylus')             // turn stylus code into css
var plumber      = require('gulp-plumber')            // handle errors
var beautify     = require('gulp-cssbeautify')        // make files human readable
var sourcemap    = require('gulp-sourcemaps')         // write sourcemaps
var minifycss    = require('gulp-minify-css')         // minify css code
var autoprefix   = require('gulp-autoprefixer')       // prefix any css with low support
var combinemq    = require('gulp-combine-media-queries') // prefix any css with low support

var paths = {
	stylus: ['assets/styl/style.styl'],
	output: 'assets/css/'
}

var plumberOpts = {
	errorHandler: notify.onError("Error: <%= error.message %>")
}

gulp.task('css', function(){
	// prepare css code
	var stream = gulp.src(paths.stylus)               // grab our stylus file
		.pipe(plumber(plumberOpts))                   // notify us if any errors appear
		.pipe(sourcemap.init())                       // get ready to write a sourcemap
		.pipe(stylus())                               // turn the stylus into css
		.pipe(combinemq())                            // put all the media queries at the bottom
		.pipe(sourcemap.write())                      // write the sourcemap
		.pipe(autoprefix('last 2 versions'))          // autoprefix the css code
	
	// make style.css
	stream.pipe(clone())                              // make a copy of the stream up to autoprefix
		.pipe(beautify())                             // make css really readable
		.pipe(gulp.dest(paths.output))                // save it into the dist folder
	
	// make style.min.css
	stream.pipe(clone())                              // make a copy of the stream up to autoprefix
		.pipe(minifycss())                            // minify it (removes the sourcemap)
		.pipe(sourcemap.write())                      // write the sourcemap
		.pipe(rename('style.min.css'))                // add .min to the filename
		.pipe(gulp.dest(paths.output))                // save it into the dist folder
	
	return stream
})

gulp.task('watch', ['css'], function(){
	gulp.watch(paths.stylus, ['css'])                 // watch for changes and run the css task
})

gulp.task('default', ['css'])

package.json

{
  "name": "gulptest",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.9.0",
    "gulp-autoprefixer": "^2.3.1",
    "gulp-beautify": "^1.1.2",
    "gulp-clone": "^1.0.0",
    "gulp-combine-media-queries": "^0.2.0",
    "gulp-cssbeautify": "^0.1.3",
    "gulp-minify-css": "^1.2.0",
    "gulp-notify": "^2.2.0",
    "gulp-plumber": "^1.0.1",
    "gulp-rename": "^1.2.2",
    "gulp-sourcemaps": "^1.5.2",
    "gulp-stylus": "^2.0.6"
  }
}