Gulp

Here's what I use

gulpfile.js
var gulp = require("gulp");
var sass = require("gulp-sass");
var pug = require("gulp-pug");
var browserSync = require("browser-sync");
var useref = require("gulp-useref");
var gulpIf = require("gulp-if");
var strip = require("gulp-strip-comments");
var cssnano = require("cssnano");
var autoprefixer = require("autoprefixer");
var postcss = require("gulp-postcss");
var uncss = require("postcss-uncss");
var uglify = require("gulp-uglify");
var cache = require("gulp-cache");
var del = require("del");
var runSequence = require("run-sequence");
var rename = require("gulp-rename");
var unused = require("gulp-unused");
var gm = require("gulp-gm");
var newer = require("gulp-newer");
var imgmin = require("gulp-imagemin");
var base64 = require("gulp-base64");
gulp.task("img-xs-logo", function() {
gulp
.src("app/img/projects/logos/*.png")
.pipe(
gm(function(gmfile) {
return gmfile.setFormat("jpg").quality(100);
})
)
.pipe(gulp.dest("app/img/min"));
});
gulp.task("img-xs-coop", function() {
gulp
.src("app/img/projects/co-op/**/*.jpg")
.pipe(
gm(function(gmfile) {
return gmfile.setFormat("jpg").quality(1);
})
)
.pipe(gulp.dest("app/img/min/xs"));
});
gulp.task("img-min", function(callback) {
runSequence(["img-xs", "img-sm", "img-md", "img-lg", "img-xl"]);
});
gulp.task("img-xs", function() {
gulp
.src("app/img/projects/illustration/*.png")
.pipe(
gm(function(gmfile) {
gmfile.setFormat("jpg").quality(5);
return gmfile.resize(100, 100);
})
)
.pipe(gulp.dest("app/img/min/xs"));
});
gulp.task("img-sm", function() {
gulp
.src("app/img/projects/illustration/*.png")
.pipe(
gm(function(gmfile) {
gmfile.setFormat("jpg").quality(20);
return gmfile.resize(200, 200);
})
)
.pipe(gulp.dest("app/img/min/sm"));
});
gulp.task("img-md", function() {
gulp
.src("app/img/projects/illustration/*.png")
.pipe(
gm(function(gmfile) {
gmfile.setFormat("jpg").quality(100);
return gmfile.resize(400, 400);
})
)
.pipe(gulp.dest("app/img/min/md"));
});
gulp.task("img-lg", function() {
gulp
.src("app/img/min/*.png")
.pipe(
gm(function(gmfile) {
gmfile.setFormat("jpg");
return gmfile.resize(600, 600).quality(100);
})
)
.pipe(gulp.dest("app/img/projects/illustration/lg"));
});
gulp.task("img-xl", function() {
gulp
.src("app/img/projects/illustration/*.png")
.pipe(
gm(function(gmfile) {
gmfile.setFormat("jpg").quality(100);
return gmfile.resize(800, 800);
})
)
.pipe(gulp.dest("app/img/min/xl"));
});
gulp.task("base64", ["sass"], function() {
return gulp
.src(config.src)
.pipe(base64(config.options))
.pipe(gulp.dest(config.dest));
});
// Start browserSync server
gulp.task("browserSync", function() {
browserSync({
injectChanges: true,
server: {
baseDir: "app"
}
});
});
gulp.task("sass", function() {
return gulp
.src("app/scss/**/*.scss") // Gets all files ending with .scss in app/scss and children dirs
.pipe(sass().on("error", sass.logError)) // Passes it through a gulp-sass, log errors to console
.pipe(gulp.dest("app/css")) // Outputs it in the css folder
.pipe(
browserSync.reload({
pretty: false,
// Reloading with Browser Sync
stream: true
})
);
});
// Pug
gulp.task("pug", function() {
return gulp
.src([
"app/pug/**/**/*.pug",
"!app/pug/**/_*/" //exclude folders starting with '_'])
])
.pipe(
pug({
pretty: false,
basedir: "app"
})
)
.pipe(rename({ dirname: "" }))
.pipe(gulp.dest("app"));
});
// Watchers
gulp.task("watch", function() {
gulp.watch("app/scss/**/*.scss", ["sass"]);
gulp.watch("app/pug/**/*.pug", ["pug"]);
gulp.watch("app/**/*.html", browserSync.reload);
gulp.watch("app/js/*.js", browserSync.reload);
});
// Default
gulp.task("default", function(callback) {
runSequence(["sass", "pug", "css", "js", "browserSync", "watch"]);
});
// Build
// Optimizing CSS and JavaScript
gulp.task("useref", function() {
return gulp
.src("app/*.html")
.pipe(useref())
.pipe(gulp.dest("dist"));
});
gulp.task("js", function() {
return gulp
.src("app/js/*.js")
.pipe(uglify())
.pipe(strip())
.pipe(gulp.dest("dist/js"));
});
gulp.task("css", function() {
var plugins = [autoprefixer({ browsers: ["last 1 version"] }), cssnano()];
return gulp
.src("app/css/main.css")
.pipe(postcss(plugins))
.pipe(gulp.dest("dist/css"));
});
// Optimizing Images
gulp.task("img-min", function() {
return (
gulp
.src("app/img/**/*.+(png|jpg|jpeg|gif|svg|pdf)")
// Caching images that ran through imagemin
.pipe(
cache(
imgmin({
interlaced: true
})
)
)
.pipe(gulp.dest("dist/img"))
);
});
// Optimizing Images
gulp.task("img", function() {
return gulp
.src("app/img/**/*.+(png|jpg|jpeg|gif|svg|pdf)")
.pipe(gulp.dest("dist/img"));
});
// Copying fonts
gulp.task("fonts", function() {
return gulp.src("app/fonts/**/*").pipe(gulp.dest("dist/fonts"));
});
// Cleaning
gulp.task("clean", function() {
return del.sync("dist").then(function(cb) {
return cache.clearAll(cb);
});
});
gulp.task("clean:dist", function() {
return del.sync(["dist/**/*"]);
});
// Build Sequences
// ---------------
gulp.task("build-img", function(callback) {
runSequence(
"clean:dist",
"sass",
["useref", "img-min", "fonts", "js", "css"],
callback
);
});
gulp.task("build", function(callback) {
runSequence(
"clean:dist",
"sass",
["useref", "img", "fonts", "js", "css"],
callback
);
});

Links

Guides