Skip to content

Instantly share code, notes, and snippets.

@jhnsnc
Last active January 11, 2018 09:09
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save jhnsnc/2ba53ff9f964f25503fe to your computer and use it in GitHub Desktop.
Save jhnsnc/2ba53ff9f964f25503fe to your computer and use it in GitHub Desktop.
Simple Node-Express Gulpfile
//general
var gulp = require('gulp');
var del = require('del');
var copy = require('gulp-copy');
//sass
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var minifyCss = require('gulp-minify-css');
//images
var svgmin = require('gulp-svgmin');
//javascript
var uglify = require('gulp-uglify');
//////////////////////////////////////////////////
// Primary Tasks
//////////////////////////////////////////////////
gulp.task('build', ['build:css', 'build:img', 'build:js']);
gulp.task('deploy', ['clean'], function() { gulp.start('build'); });
gulp.task('build-debug', ['build-debug:css', 'build-debug:img', 'build-debug:js']);
gulp.task('watch', ['build-debug', 'watch:css', 'watch:img', 'watch:js']);
//wipe public directory
gulp.task('clean', ['clean:css', 'clean:img', 'clean:js']);
//////////////////////////////////////////////////
// Config
//////////////////////////////////////////////////
var config = {
cssSrcDir: 'client-src/scss',
cssDestDir: 'public/css',
autoprefixOptions: {
browsers: ['> 1%', 'last 2 versions'],
cascade: true,
remove: true
},
imgSrcDir: 'client-src/img',
imgDestDir: 'public/img',
jsSrcDir: 'client-src/js',
jsDestDir: 'public/js'
};
//////////////////////////////////////////////////
// Task Details
//////////////////////////////////////////////////
//styles
gulp.task('clean:css', function(cb) {
var files = config.cssDestDir + '/**/*.*';
del(files, cb);
});
gulp.task('build:css', function() {
var files = config.cssSrcDir + '/**/*.scss';
gulp.src(files)
.pipe(sass.sync({
outFile: 'maintenance.css',
outputStyle: 'nested'
}).on('error', sass.logError))
.pipe(autoprefixer(config.autoprefixOptions))
.pipe(minifyCss())
.pipe(gulp.dest(config.cssDestDir));
});
gulp.task('build-debug:css', function() {
var files = config.cssSrcDir + '/**/*.scss';
gulp.src(files)
.pipe(sass.sync({
outFile: 'maintenance.css',
outputStyle: 'nested',
sourceComments: true,
sourceMap: true,
souceMapEmbed: true
}).on('error', sass.logError))
.pipe(autoprefixer(config.autoprefixOptions))
.pipe(gulp.dest(config.cssDestDir));
});
gulp.task('watch:css', function() {
var files = config.cssSrcDir + '/**/*.*';
gulp.watch(files, ['build-debug:css']);
});
//images
gulp.task('clean:img', function(cb) {
var files = config.imgDestDir + '/**/*.*';
del(files, cb);
});
gulp.task('build:img', function() {
var svgFiles = config.imgSrcDir + '/**/*.svg';
var otherImgFiles = config.imgSrcDir + '/**/*.{png,jpg,gif}';
//compress SVGs (lossless)
gulp.src(svgFiles)
.pipe(svgmin())
.pipe(gulp.dest(config.imgDestDir));
//copy PNGs/JPGs/GIFs
gulp.src(otherImgFiles)
.pipe(copy(config.imgDestDir, {prefix: 2}));
});
gulp.task('build-debug:img', function() {
var files = config.imgSrcDir + '/**/*.{svg,png,jpg,gif}';
//copy SVGs/PNGs/JPGs/GIFs (no compression for build-debug)
gulp.src(files)
.pipe(copy(config.imgDestDir, {prefix: 2}));
});
gulp.task('watch:img', function() {
var files = config.imgSrcDir + '/**/*.*';
gulp.watch(files, ['build-debug:img']);
});
//javascript
gulp.task('clean:js', function(cb) {
var files = config.jsDestDir + '/**/*.*';
del(files, cb);
});
gulp.task('build:js', function() {
var files = config.jsSrcDir + '/**/*.js';
//compress JS
gulp.src(files)
.pipe(uglify())
.pipe(gulp.dest(config.jsDestDir));
});
gulp.task('build-debug:js', function() {
var files = config.jsSrcDir + '/**/*.js';
//copy JS
gulp.src(files)
.pipe(copy(config.jsDestDir, {prefix: 2}));
});
gulp.task('watch:js', function() {
var files = config.jsSrcDir + '/**/*.*';
gulp.watch(files, ['build-debug:js']);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment