Skip to content

Instantly share code, notes, and snippets.

@Deathnerd
Created July 12, 2015 23:16
Show Gist options
  • Save Deathnerd/fdb657b6f321ed203f2c to your computer and use it in GitHub Desktop.
Save Deathnerd/fdb657b6f321ed203f2c to your computer and use it in GitHub Desktop.
Static site builder with Gulp
var gulp = require('gulp');
var rename = require('gulp-rename');
var fileinclude = require('gulp-file-include');
var browserSync = require('browser-sync');
var path = require('path');
var prettify = require('gulp-prettify');
var jpegoptim = require('imagemin-jpegoptim');
var pngquant = require('imagemin-pngquant');
var optipng = require('imagemin-optipng');
var reload = browserSync.reload;
var paths = {
base: ".",
src: this.base + "/src",
dist: this.base + "/dist",
templates: this.src + '/templates',
bower_components: this.src + "/bower_components"
};
var serve = function() {
// Use this one for static files
browserSync({
server: {
baseDir: paths.base + "/"
}
});
// Use this one if using a local server (Ex: Ampps)
/*browserSync({
proxy: "local.dev"
});*/
gulp.watch([paths.dist + '/*.html'], reload);
};
/**
* Watch for changes to the HTML files in the dist folder and issue a browser-sync reload
*/
gulp.task('serve', serve);
/**
* Run fileinclude on all of the html files in the src folder (non-recursive) and move them to dist
*/
gulp.task('fileinclude', function(){
gulp.src(paths.src + "/*.html")
.pipe(fileinclude())
.pipe(rename({ // Strip out the .tpl in the template file
extname: ""
}))
.pipe(rename({ // Re-add the .html file extension
extname: ".html"
}))
.pipe(prettify({
indent_size: 4,
indent_char: " ",
indent_inner_html: true,
preserve_newlines: true,
brace_style: "expand"
}))
.pipe(gulp.dest(paths.dist));
});
/**
* Sets up a watch for fileinclude and starts the browser-sync server
*/
gulp.task('default', function(){
gulp.watch([paths.src + "/*.html", paths.templates + "/*.tpl.html"], ['fileinclude']);
serve();
});
/**
* Runs image compression on the source images folder and moves them to the dist folder
*/
gulp.task('imageopt', function(){
gulp.src(paths.src + "/images/**/*.{png,jpg,jpeg}")
.pipe(optipng({optimizationLevel: 3}))
.pipe(pngquant({quality: '65-80', speed: 4}))
.pipe(jpegoptim({max: 70}))
.pipe(gulp.dest(paths.dist + "/images"));
});
{
"name": "",
"version": "1.0.0",
"description": "",
"main": "gulpfile.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"browser-sync": "^2.7.13",
"gulp": "^3.9.0",
"gulp-file-include": "^0.13.2",
"gulp-prettify": "^0.3.0",
"gulp-rename": "^1.2.2",
"imagemin-jpegoptim": "^4.0.0",
"imagemin-optipng": "^4.3.0",
"imagemin-pngquant": "^4.1.0"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment