Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Gulp file for a static website with SCSS, UnCSS, inline sources, HTML minify, Zopfli compress and multiple local web servers.
/* Load plugins */
var gulp = require('gulp'),
sass = require('gulp-ruby-sass'),
watch = require('gulp-watch'),
jshint = require('gulp-jshint'),
notify = require('gulp-notify'),
uncss = require('gulp-uncss'),
zopfli = require("gulp-zopfli"),
connect = require('gulp-connect'),
minifyhtml = require('gulp-minify-html'),
inlinesource = require('gulp-inline-source');
gulp.task('connectBuild', function() {
connect.server({
root: 'build',
port: 8000,
livereload: true
});
});
gulp.task('connectPublic', function() {
connect.server({
root: 'public',
port: 8001
});
});
gulp.task('css', function() {
return gulp.src('./src/sass/*.scss')
.pipe( sass() )
.pipe( gulp.dest('./build/css') )
.pipe( connect.reload() )
.pipe( notify('CSS task complete!') )
});
gulp.task('js', function() {
return gulp.src('./src/js/*.js')
.pipe( jshint() )
.pipe( jshint.reporter('default') )
.pipe( gulp.dest('./build/js') )
.pipe( connect.reload() )
.pipe( notify('JS task complete!') )
});
gulp.task('html', function() {
return gulp.src('./src/*.html')
.pipe( connect.reload() )
.pipe( gulp.dest('./build') )
});
gulp.task('uncss', function() {
return gulp.src('./build/css/*.css')
.pipe( uncss({ html: ['./build/*.html'] }) )
.pipe( gulp.dest('./build/css') )
});
gulp.task('minify', function() {
return gulp.src('./build/*.html')
.pipe( inlinesource( {compress: true} ) )
.pipe( minifyhtml() )
.pipe( gulp.dest('./public') )
});
gulp.task('compress', function() {
return gulp.src('./public/*.html')
.pipe( zopfli() )
.pipe( gulp.dest('./public') )
});
/* Default task */
gulp.task('default', ['connectBuild', 'watch'], function() {
gulp.start('css', 'js', 'html');
});
/* Deploy task */
gulp.task('deploy', ['connectPublic'], function() {
gulp.start('uncss', 'minify', 'compress');
});
/* Watch task */
gulp.task('watch', function() {
gulp.watch('./src/sass/*.scss', ['css']);
gulp.watch('./src/js/*.js', ['js']);
gulp.watch('./src/*.html', ['html']);
});
@alfredbez

This comment has been minimized.

Copy link

commented Nov 24, 2014

Can you also add your package.json?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.