Skip to content

Instantly share code, notes, and snippets.

@jofralogo
Last active August 29, 2015 14:26
Show Gist options
  • Save jofralogo/02b4ca7e1a125f3e115f to your computer and use it in GitHub Desktop.
Save jofralogo/02b4ca7e1a125f3e115f to your computer and use it in GitHub Desktop.
/*
* Base Gulp.js workflow
* for simple front-end projects
* author: José López
* version: 1.0
* to-do:
- Compile changed files only when watching. (gulp-changed)
*/
var browserSync = require('browser-sync');
var watchify = require('watchify');
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var gulp = require('gulp');
var gutil = require('gulp-util');
var gulpSequence = require('gulp-sequence');
var processhtml = require('gulp-jade');
var processphp = require('gulp-jade-php');
var sass = require('gulp-sass');
var watch = require('gulp-watch');
var minifycss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var plumber = require("gulp-plumber");
var notify = require("gulp-notify");
var streamify = require('gulp-streamify');
var prod = gutil.env.prod;
/*-----------------
PROJECT VARS
------------------*/
var srcPath = './src',
buildPath = './build',
jadeExt = 'html',
jadePath = srcPath + '/templates',
sassPath = srcPath + '/scss',
jsMainFile = srcPath + '/js/main',
cssOutputPath = buildPath + '/stylesheets',
jsOutputPath = buildPath + '/js',
jsOutputFile = 'bundle.js',
phpOutputPath = buildPath;
var onError = function(err) {
console.log(err.message);
this.emit('end');
};
/*--------
JS
---------*/
var b = watchify(browserify(jsMainFile, {
cache: {},
packageCache: {},
fullPaths: true
}));
gulp.task('js', bundle);
b.on('update', bundle);
b.on('log', gutil.log);
function bundle() {
return b.bundle()
.pipe(plumber({errorHandler: notify.onError("× <%= error.message %>")}))
.pipe(source(jsOutputFile))
.pipe(prod ? streamify(uglify()) : gutil.noop())
.pipe(gulp.dest(jsOutputPath))
.pipe(browserSync.stream())
.pipe(notify({ message: '✔ <%= file.relative %>' }));
}
/*----------
HTML
-----------*/
// html
gulp.task('html', function() {
return gulp.src(jadePath + '/**/[^_]*.jade')
.pipe(plumber({errorHandler: notify.onError("× <%= error.message %>")}))
.pipe(processhtml())
.pipe(gulp.dest(buildPath))
.pipe(browserSync.stream())
.pipe(notify({ message: '✔ <%= file.relative %>' }));
});
/*----------
PHP
-----------*/
//php
gulp.task('php', function() {
return gulp.src(jadePath + '/**/[^_]*.jade')
.pipe(plumber({errorHandler: notify.onError("× <%= error.message %>")}))
.pipe(processphp({pretty: '\t'}))
.pipe(gulp.dest(buildPath))
.pipe(browserSync.stream())
.pipe(notify({ message: '✔ <%= file.relative %>' }));
});
/*----------
SASS
-----------*/
// sass
gulp.task('sass', function() {
return gulp.src(sassPath + '/**/[^_]*.scss')
.pipe(plumber({errorHandler: notify.onError("× <%= error.message %>")}))
.pipe(sass({
includePaths: require('node-bourbon').includePaths
}))
.pipe(prod ? minifycss() : gutil.noop())
.pipe(gulp.dest(cssOutputPath))
.pipe(browserSync.stream())
.pipe(notify({ message: '✔ <%= file.relative %>' }));
});
if (jadeExt === "php"){
jadeTask = 'php';
} else {
jadeTask = 'html';
}
/*------------------
BROWSERSYNC
------------------*/
gulp.task('serve', function() {
browserSync.init({
server: {
baseDir: buildPath
}
});
gulp.watch('./src/templates/**/*', [jadeTask]);
gulp.watch('./src/scss/**/*.scss', ['sass']);
});
// use gulp-sequence to finish building html, sass and js before first page load
gulp.task('default', gulpSequence([jadeTask, 'sass', 'js'], 'serve'));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment