Skip to content

Instantly share code, notes, and snippets.

@alanpeabody
Last active January 3, 2016 06:58
Show Gist options
  • Save alanpeabody/7021d903961a3c9eab6e to your computer and use it in GitHub Desktop.
Save alanpeabody/7021d903961a3c9eab6e to your computer and use it in GitHub Desktop.
gulp, browserify, hbsfy
// 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"
]
}
}
<h2>Hello {{ world }}</h2>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment