Skip to content

Instantly share code, notes, and snippets.

@fdjones
Created March 14, 2017 13:56
Show Gist options
  • Save fdjones/3b6c065d5d90cdb9d9c6cd291008b53d to your computer and use it in GitHub Desktop.
Save fdjones/3b6c065d5d90cdb9d9c6cd291008b53d to your computer and use it in GitHub Desktop.
var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
var useref = require('gulp-useref');
var uglify = require('gulp-uglify');
var gulpIf = require('gulp-if');
var cssnano = require('gulp-cssnano');
var imagemin = require('gulp-imagemin');
var cache = require('gulp-cache');
var del = require('del');
var runSequence = require('run-sequence');
var nunjucksRender = require('gulp-nunjucks-render');
gulp.task('nunjucksRender', function() {
return gulp.src('src/pages/**/*.+(html|njk)')
.pipe(nunjucksRender({
path: ['src/templates']
}))
.pipe(gulp.dest('src'))
});
gulp.task('sass', function(){
return gulp.src('src/scss/**/*.scss')
.pipe(sass()) // Converts Sass to CSS with gulp-sass
.pipe(gulp.dest('src/css'))
.pipe(browserSync.reload({
stream: true
}))
});
gulp.task('watch', ['browserSync', 'sass'], function (){
gulp.watch('src/scss/**/*.scss', ['sass']);
// Reloads the browser whenever HTML or JS files change
gulp.watch('src/*.html', browserSync.reload);
gulp.watch('src/js/**/*.js', browserSync.reload);
gulp.watch('src/templates/partials/*.njk', browserSync.reload);
});
gulp.task('browserSync', function() {
browserSync.init({
server: {
baseDir: 'src'
},
})
})
gulp.task('useref', function(){
return gulp.src('src/*.html')
.pipe(useref())
.pipe(gulpIf('*.js', uglify()))
// Minifies only if it's a CSS file
.pipe(gulpIf('*.css', cssnano()))
.pipe(gulp.dest('build'))
});
gulp.task('img', function(){
return gulp.src('src/img/**/*.+(png|jpg|jpeg|gif|svg)')
// Caching images that ran through imagemin
.pipe(cache(imagemin({
interlaced: true
})))
.pipe(gulp.dest('build/img'))
});
gulp.task('clean:build', function() {
return del.sync('build');
})
gulp.task('build', function (callback) {
runSequence('clean:build',
['sass', 'useref', 'img'],
callback
)
})
gulp.task('default', function (callback) {
runSequence(['sass','browserSync', 'nunjucksRender', 'watch'],
callback
)
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment