Create a gist now

Instantly share code, notes, and snippets.

@ridgehkr /.bowerrc
Last active Aug 29, 2015

What would you like to do?
Starter Gulp Project (compiles Sass, CoffeeScript and JavaScript, Jade)
{
"directory": "bower_components"
}
{
"name": "project-name",
"version": "0.0.1",
"authors": [
"author": "Your Name <you@email.com>"
],
"devDependencies": {
}
}
'use strict';
//===================================
// Config
// source files for processing
var sources = {
scripts: [
'source/scripts/application.coffee' // custom application scripts
],
styles: [
'source/styles/**/*.scss' // Foundation + custom application styles
],
jade: [
'source/*.jade'
],
images: [
'source/images/**/*.{png,jpg,gif,jpeg,svg}'
]
};
// target directories for compiled source files
var targets = {
scripts: 'build/scripts',
styles: 'build/styles',
images: 'build/images',
root: 'build/'
};
// load all Gulp plugins
var gulp = require('gulp'),
browserSync = require('browser-sync'),
autoprefixer = require('gulp-autoprefixer'),
changed = require('gulp-changed'),
coffee = require('gulp-coffee'),
concat = require('gulp-concat'),
filter = require('gulp-filter'),
imagemin = require('gulp-imagemin'),
jade = require('gulp-jade'),
plumber = require('gulp-plumber'),
replace = require('gulp-replace'),
sass = require('gulp-sass'),
uglify = require('gulp-uglify');
var reload = browserSync.reload;
//===================================
// Processes
// compile Jade -> HTML
gulp.task('jade', function() {
return gulp.src( sources.jade )
.pipe( plumber() )
.pipe( jade( { pretty: true } ) )
.pipe( gulp.dest( targets.root ) );
});
// compile all custom and third-party SASS -> CSS
gulp.task('styles', function() {
// handle Sass errors so the server process doesn't get terminated
var sass_error = function( e ){
return console.log( e );
};
return gulp.src( sources.styles )
.pipe( sass( {
onError: sass_error,
errLogToConsole: true,
outputStyle: 'compressed'
} ) )
.pipe( autoprefixer( [ 'last 2 versions', '> 1%' ] ) )
.pipe( gulp.dest( targets.styles ) );
});
// compress design images
gulp.task('images', function() {
return gulp.src( sources.images )
.pipe( plumber() )
// only pipe through modified images
.pipe( changed( targets.images ) )
.pipe( imagemin() )
.pipe( gulp.dest( targets.images ) );
});
// compile and minify custom scripts (from CoffeeScript) and third-party JS -> combined, minified JS
gulp.task('scripts', function() {
// create filters for selective processing within the pipe()
var coffee_filter = filter( [ 'application.coffee' ] );
return gulp.src( sources.scripts )
.pipe( plumber() )
// parse and minify CoffeeScript
.pipe( coffee_filter )
.pipe( coffee( { bare: true } ) )
.pipe( coffee_filter.restore() )
// concat and minify all scripts
.pipe( concat( 'application.js', { newLine: ';' } ) )
.pipe( uglify() )
.pipe( gulp.dest( targets.scripts ) );
});
//===================================
// Tasks
// run the dev server
gulp.task('server', function() {
return browserSync({
open: true,
reloadDelay: 1200,
notify: false,
watchOptions: {
debounceDelay: 1000
},
server: {
baseDir: targets.root
}
});
});
// watch source and build directories for changes
gulp.task('watch', function() {
// watch for changes to the source files, trigger compilation
gulp.watch( 'source/**/*.jade', [ 'jade' ] );
gulp.watch( 'source/scripts/application.coffee', [ 'scripts' ] );
gulp.watch( sources.styles, [ 'styles' ] );
gulp.watch( sources.images, [ 'images' ] );
// watch for changes deployed to the build directory and reload browser
return gulp.watch('build/**/**', function( file ) {
if ( file.type === "changed" ) {
return browserSync.reload();
}
});
});
// build from source w/o starting the dev server
gulp.task( 'build', [ 'scripts', 'styles', 'jade' ] );
// build from source and start dev server
gulp.task( 'default', [ 'watch', 'server', 'build' ] );
  1. cd to project root
  2. $ npm install

Initial configuration assumes directory structure of:

source
  styles
  scripts
  images
  index.jade

Start dev server: $ gulp

Build project from source: $ gulp build

{
"name": "project-name",
"version": "0.0.1",
"description": "",
"author": "Your Name <you@email.com>",
"devDependencies": {
"browser-sync": "latest",
"gulp": "latest",
"gulp-add-src": "latest",
"gulp-autoprefixer": "latest",
"gulp-changed": "latest",
"gulp-coffee": "latest",
"gulp-concat": "latest",
"gulp-filter": "latest",
"gulp-imagemin": "latest",
"gulp-jade": "latest",
"gulp-modulizr": "latest",
"gulp-plumber": "latest",
"gulp-replace": "latest",
"gulp-sass": "latest",
"gulp-uglify": "latest"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment