Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
My web development gulpfile
var browserSync = require('browser-sync');
var del = require('del');
var gulp = require('gulp');
var plugins = require('gulp-load-plugins')();
var runSequence = require('run-sequence');
var paths = {
images: "source/**/*.{png,svg,jpg}",
styles: "source/**/*.{css,scss}",
templates: "source/**/*.swig",
source: "source",
tmp: ".tmp",
build: "build",
layout: "source/shared/layout.swig"
};
// Optimize images and copy them to the build directory
gulp.task('images', function () {
return gulp.src(paths.images)
.pipe(plugins.cache(plugins.imagemin({ progressive: true, interlaced: true })))
.pipe(gulp.dest('build'));
});
// Compile styles and copy them to the build directory.
gulp.task('styles', function () {
return gulp.src(paths.styles)
.pipe(plugins.sourcemaps.init())
.pipe(plugins.sass({ precision: 10, onError: plugins.util.log }))
.pipe(plugins.autoprefixer({ browsers: [ 'ie >= 10', 'android >= 4.1' ] }))
.pipe(plugins.sourcemaps.write())
.pipe(gulp.dest('.tmp'))
.pipe(plugins.csso())
.pipe(gulp.dest('build'));
});
// Compile templates and copy them to the build directory.
gulp.task('templates', function() {
return gulp.src(paths.templates)
.pipe(plugins.frontMatter({ property: 'data' }))
.pipe(plugins.wrap({ src: paths.layout }))
.pipe(plugins.swig({ defaults: { cache: false } }))
.on("error", plugins.util.log)
.on("error", function() { this.emit("end"); })
.pipe(gulp.dest(paths.tmp))
.pipe(plugins.minifyHtml())
.pipe(gulp.dest(paths.build));
});
// Remove the build directory.
gulp.task('clean', del.bind(null, [ paths.tmp, paths.build ], { dot: true }));
// Watch files for changes and reload the page in the browser when they do.
gulp.task('watch', [ 'images', 'styles', 'templates' ], function() {
browserSync({ notify: false, server: [ paths.tmp, paths.source ] });
gulp.watch([ paths.templates ], [ 'templates', browserSync.reload ]);
gulp.watch([ paths.styles ], [ 'styles', browserSync.reload ]);
gulp.watch([ paths.images ], browserSync.reload);
});
// Build the source and serve the result.
gulp.task('watch:build', [ 'build' ], function () {
browserSync({ notify: false, server: 'build' });
});
// Build the source.
gulp.task('build', [ 'clean' ], function (callback) {
runSequence([ 'styles', 'templates', 'images' ], callback);
});
gulp.task('default', [ 'watch' ]);
{
"devDependencies": {
"browser-sync": "^1.3.0",
"del": "^1.1.0",
"gulp": "^3.8.5",
"gulp-autoprefixer": "^2.0.0",
"gulp-cache": "0.2.2",
"gulp-coffee": "*",
"gulp-csso": "^1.0.0",
"gulp-debug": "*",
"gulp-imagemin": "^2.0.0",
"gulp-front-matter": "^1.2.3",
"gulp-load-plugins": "^0.8.0",
"gulp-minify-html": "0.1.5",
"gulp-sass": "^1.2.0",
"gulp-sourcemaps": "^1.3.0",
"gulp-swig": "^0.7.4",
"gulp-uglify": "^1.0.1",
"gulp-util": "*",
"gulp-wrap": "^0.11.0",
"opn": "^1.0.0",
"run-sequence": "^1.0.1"
},
"engines": {
"node": ">=0.10.0"
},
"private": true
}

hoe to ocmmen

looks good. well done

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment