Create a gist now

Instantly share code, notes, and snippets.

Embed
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
}
@williamhunter9094

This comment has been minimized.

Show comment
Hide comment

hoe to ocmmen

@williamhunter9094

This comment has been minimized.

Show comment
Hide comment
@williamhunter9094

williamhunter9094 Jun 15, 2017

looks good. well done

looks good. well done

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