gulp lesson example files

gulpfile.js

var gulp         = require('gulp')               // the main guy
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 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


gulp.task('css', function(){
	var stream = gulp.src('src/style.styl')      // grab our stylus file
		.pipe(plumber())                         // stop syntax errors crashing the watch
		.pipe(sourcemap.init())                  // get ready to write a sourcemap
		.pipe(stylus())                          // turn the stylus into css
		.pipe(sourcemap.write())                 // write the sourcemap
		.pipe(autoprefix('last 2 versions'))     // autoprefix the css code
		.pipe(gulp.dest('dist/'))                // save it into the dist folder
		.pipe(minifycss())                       // minify it (removes the sourcemap)
		.pipe(sourcemap.write())                 // write the sourcemap again
		.pipe(rename('style.min.css'))           // add .min to the filename
		.pipe(gulp.dest('dist/'))                // save it into the dist folder
	
	return stream
})

gulp.task('watch', ['css'], function(){
	gulp.watch(['src/style.styl'], ['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-minify-css": "^1.2.0",
    "gulp-plumber": "^1.0.1",
    "gulp-rename": "^1.2.2",
    "gulp-sourcemaps": "^1.5.2",
    "gulp-stylus": "^2.0.6"
  }
}

style.styl

primary = red
myfont = 'Comic Sans MS'


body
	background primary
	margin 0
	font-family myfont

header
	background white
	
	h1
		color primary
	
	.container
		display flex
		justify-content space-between
		align-items center