alanpeabody/gulpfile.js Secret

## gulpfile.js
// Gulp Plugins
var gulp       = require('gulp'),
    gutil      = require('gulp-util'),
    browserify = require('gulp-browserify'),
    concat     = require('gulp-concat'),
    less       = require('gulp-less');

// Node Modules
var spawn      = require('child_process').spawn,
    path       = require('path');

var node; // Contains our node server

/**
* $ gulp js
* description: compiles client side javascripts
*/
gulp.task('js', function() {
  //single entry point to browserify
  gulp.src('js/app.js')
    .pipe(browserify({
      insertGlobals : true,
      transform: ['hbsfy'], // compile handlebars templates
      debug : true
    }))
    .pipe(concat('app.js'))
    .pipe(gulp.dest('./public/js'));
});


/**
* $ gulp less
* description: compiles less
*/
gulp.task('less', function() {
  gulp.src('./less/app.less')
    .pipe(less())
    .pipe(gulp.dest('./public/css'));
});


/**
* $ gulp server
* description: launch the server. If there's a server already running, kill it.
*/
gulp.task('server', function() {
  if (node) { node.kill() };
  node = spawn('node', ['server.js'], {stdio: 'inherit'});
  node.on('close', function (code) {
    if (code === 8) {
      gulp.log('Error detected, waiting for changes...');
    }
  });
});

/**
* $ gulp default
* description: runs js, server, less, watches for script changes
*/
gulp.task('default', function() {
  // Compile & Server on start
  gulp.run('js', 'less', 'server');

  // Watch js files and run scripts if they change
  gulp.watch('js/**', function() {
    gulp.run('scripts');
  });

  // Watch less files and run less if they change
  gulp.watch('less/**', function() {
    gulp.run('less');
  });
});

// Kill node on exit
process.on('exit', function() {
  if (node) { node.kill() };
})

## index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Example</title>
    <script src='/js/app.js'></script>
    <!--link rel='stylesheet' href='/css/app.css' /-->
  </head>
  <body>
    <h1>Test</h1>
  </body>
</html>

## js_app.js
var $ = require('jquery');
var template = require('../templates/test.hbs');

$('document').ready(function() {
  $('body').html(template({ world: "WORLD!" }));
});

## package.json
{
  "name": "Example",
  "description": "Example",
  "version": "0.0.1",
  "private": true,
  "dependencies": {
    "express": "~3.4.7"
  },
  "devDependencies": {
    "gulp-util": "~2.2.9",
    "gulp": "~3.3.1",
    "gulp-browserify": "~0.2.4",
    "gulp-concat": "~2.1.7",
    "browserify": "~3.19.1",
    "browserify-shim": "~3.1.4",
    "gulp-less": "~1.1.8",
    "less": "~1.6.1",
    "handlebars": "~1.0.12",
    "hbsfy": "~1.0.0"
  },
  "browser": {
    "jquery": "./bower_components/jquery/jquery.js"
  },
  "browserify-shim": {
    "jquery": "$"
  },
  "browserify": {
    "transform": [
      "browserify-shim"
    ]
  }
}

## templates_test.hbs
<h2>Hello {{ world }}</h2>
	// Gulp Plugins
	var gulp = require('gulp'),
	gutil = require('gulp-util'),
	browserify = require('gulp-browserify'),
	concat = require('gulp-concat'),
	less = require('gulp-less');

	// Node Modules
	var spawn = require('child_process').spawn,
	path = require('path');

	var node; // Contains our node server

	/**
	* $ gulp js
	* description: compiles client side javascripts
	*/
	gulp.task('js', function() {
	//single entry point to browserify
	gulp.src('js/app.js')
	.pipe(browserify({
	insertGlobals : true,
	transform: ['hbsfy'], // compile handlebars templates
	debug : true
	}))
	.pipe(concat('app.js'))
	.pipe(gulp.dest('./public/js'));
	});


	/**
	* $ gulp less
	* description: compiles less
	*/
	gulp.task('less', function() {
	gulp.src('./less/app.less')
	.pipe(less())
	.pipe(gulp.dest('./public/css'));
	});


	/**
	* $ gulp server
	* description: launch the server. If there's a server already running, kill it.
	*/
	gulp.task('server', function() {
	if (node) { node.kill() };
	node = spawn('node', ['server.js'], {stdio: 'inherit'});
	node.on('close', function (code) {
	if (code === 8) {
	gulp.log('Error detected, waiting for changes...');
	}
	});
	});

	/**
	* $ gulp default
	* description: runs js, server, less, watches for script changes
	*/
	gulp.task('default', function() {
	// Compile & Server on start
	gulp.run('js', 'less', 'server');

	// Watch js files and run scripts if they change
	gulp.watch('js/**', function() {
	gulp.run('scripts');
	});

	// Watch less files and run less if they change
	gulp.watch('less/**', function() {
	gulp.run('less');
	});
	});

	// Kill node on exit
	process.on('exit', function() {
	if (node) { node.kill() };
	})
	<!DOCTYPE html>
	<html>
	<head>
	<title>Example</title>
	<script src='/js/app.js'></script>
	<!--link rel='stylesheet' href='/css/app.css' /-->
	</head>
	<body>
	<h1>Test</h1>
	</body>
	</html>
	var $ = require('jquery');
	var template = require('../templates/test.hbs');

	$('document').ready(function() {
	$('body').html(template({ world: "WORLD!" }));
	});
	{
	"name": "Example",
	"description": "Example",
	"version": "0.0.1",
	"private": true,
	"dependencies": {
	"express": "~3.4.7"
	},
	"devDependencies": {
	"gulp-util": "~2.2.9",
	"gulp": "~3.3.1",
	"gulp-browserify": "~0.2.4",
	"gulp-concat": "~2.1.7",
	"browserify": "~3.19.1",
	"browserify-shim": "~3.1.4",
	"gulp-less": "~1.1.8",
	"less": "~1.6.1",
	"handlebars": "~1.0.12",
	"hbsfy": "~1.0.0"
	},
	"browser": {
	"jquery": "./bower_components/jquery/jquery.js"
	},
	"browserify-shim": {
	"jquery": "$"
	},
	"browserify": {
	"transform": [
	"browserify-shim"
	]
	}
	}