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

@alfredbez alfredbez 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