Skip to content

Instantly share code, notes, and snippets.

@craveytrain
Last active August 29, 2015 13:56
Show Gist options
  • Save craveytrain/8807275 to your computer and use it in GitHub Desktop.
Save craveytrain/8807275 to your computer and use it in GitHub Desktop.
My gulpfile setup
var gulp = require('gulp');
var util = require('gulp-util');
var clean = require('gulp-clean');
var browserify = require('gulp-browserify');
var rework = require('gulp-rework');
var prefix = require('gulp-autoprefixer');
var jshint = require('gulp-jshint');
var connect = require('gulp-connect');
var concat = require('gulp-concat');
// unless `--env prod` is passed, it ain't prod
var isProd = util.env.env === 'prod';
// Store these for reuse
var buildDir = 'build';
var jsDir = 'js';
var cssDir = 'css';
var photoDir = 'photos';
// Helpful for watching the same files as being built
var cssFiles = [
'bower_components/normalize-css/normalize.css',
cssDir + '/**/*.css'
];
var jsFiles = jsDir + '/main.js';
var htmlFiles = 'html/**/*.html';
var photoFiles = photoDir + '/**/*';
// Mama said knock you out
gulp.task('clean', function() {
return gulp.src(buildDir, {read: false})
.pipe(clean());
});
// Copy the simple static files. Shit for local dev, better for packaging & deployment.
gulp.task('html', function() {
return gulp.src(htmlFiles)
.pipe(gulp.dest(buildDir));
});
// Gotta do something with the photos
gulp.task('photos', function() {
return gulp.src(photoFiles)
.pipe(gulp.dest(buildDir + '/' + photoDir));
});
// Does it pass lint? Use browserify?
gulp.task('js', function() {
return gulp.src(jsFiles)
.pipe(jshint())
.pipe(jshint.reporter('jshint-stylish'))
.pipe(browserify({
debug : !isProd
}))
.pipe(gulp.dest(buildDir + '/' + jsDir));
});
// Just going with basic rework for now, autoprefixer for, well, that should be obvious
gulp.task('css', function() {
return gulp.src(cssFiles)
.pipe(rework(rework.extend(), {
sourcemap: true
}))
.pipe(prefix("last 1 version"))
.pipe(concat('main.css'))
.pipe(gulp.dest(buildDir + '/' + cssDir));
});
// Simple static http server
gulp.task('serve', connect({
root: buildDir
}));
// Build the things
gulp.task('build', ['clean'], function() {
return gulp.start('html', 'js', 'css', 'photos');
});
// Watch for changes to the files
gulp.task('watch', function() {
gulp.watch(htmlFiles, ['html']);
gulp.watch(photoFiles, ['photos']);
gulp.watch(cssFiles, ['css']);
gulp.watch(jsFiles, ['js']);
});
// Build, serve and watch for changes
gulp.task('preview', ['build'], function() {
return gulp.start('serve', 'watch')
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment