Gulp - Project to build site with Jade + Stylus with Livereload & Watch.

gulpfile.js

/*
  Created by: Mauricio Rocha
  www.sampapix.com.br

  Install the plugins below, use -global or --save-dev either way will work.
    gulp, gulp-jade, gulp-concat, gulp-uglify, gulp-minify-css, gulp-stylus, gulp-obfuscate, gulp-connect
    
  Create the folders below inside your project folder:
    src, src/js, src/styl
    
  Save your .jade files inside src.
  Save your .styl files inside src/styl.
  Save this file inside your projects folder and run:
    gulp
    
  Open any browser, firefox or chrome, and type localhost:8080
  
  You are done. Enjoy!
  
  P.S: You don't need anything else, nothing to install on the browser either, just edit your files.
  Add ".js" files to the watching section if you need them to be reload automatically.
*/
var gulp = require('gulp');
var jade = require('gulp-jade');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var minifyCSS = require('gulp-minify-css');
var stylus = require('gulp-stylus');
var obfuscate = require('gulp-obfuscate');

var connect = require('gulp-connect');

var src = './src';

/*build tasks*/
var build = './build';

var paths = {
  jade: [src+'/*.jade'],
  stylus: [src+'/styl/*.styl']
};

gulp.task('connect',function () {
  var options = {
    root: build,
    livereload: true
  };
  connect.server(options);
});

gulp.task('jadeBuild', function() {
  var options = {
    pretty: true
  }; 
  gulp.src(src+'/*.jade')
    .pipe(jade(options,{path:'../img'}))
    .pipe(gulp.dest(build))
    .pipe(connect.reload());
});

gulp.task('jsBuild',function() {
  return gulp.src([src+'/js/*.js'])
        .pipe(concat('standard.js'))
        // .pipe(uglify()) // uglify code
        // .pipe(obfuscate()) // obfuscate code
        .pipe(gulp.dest(build+'/js'));
});

gulp.task('cssBuild',function () {
  return gulp.src(src+'/css/*.css')
        .pipe(minifyCSS({keepBreaks:true}))
        .pipe(gulp.dest(build+'/css'));
});

gulp.task('stylBuild',function () {
  return gulp.src(src+'/styl/*.styl')
        .pipe(stylus())
        // .pipe(minifyCSS({keepBreaks:true})) // minify css
        .pipe(minifyCSS())
        .pipe(gulp.dest(build+'/css'));
});

/*watch*/
gulp.task('watch', function () {
  gulp.watch(paths.jade, ['jadeBuild']);
  gulp.watch(paths.stylus, ['stylBuild']);
});

gulp.task('imgBuild',function () {
  return gulp.src([src+'/img/*'], {base: src+'/img'})
        .pipe(gulp.dest(build+'/img'));
});

gulp.task('default', ['connect','jsBuild','stylBuild','imgBuild','watch']);

Gulp - Project to build site with Jade + Stylus with Livereload & Watch.

Created by: Mauricio Rocha
www.sampapix.com.br

Install the plugins below, use -global or --save-dev either way will work.
gulp, gulp-jade, gulp-concat, gulp-uglify, gulp-minify-css, gulp-stylus, gulp-obfuscate, gulp-connect

Create the folders below inside your project folder:
src, src/js, src/styl

Save your .jade files inside src.
Save your .styl files inside src/styl.
Save this file inside your projects folder and run:
gulp

Open any browser, firefox or chrome, and type localhost:8080

You are done. Enjoy!

P.S: You don't need anything else, nothing to install on the browser either, just edit your files.
Add .js files to the watching section if you need them to be reloaded automatically.