Skip to content

Instantly share code, notes, and snippets.

@krzysztofjeziorny
Created November 5, 2018 15:06
Show Gist options
  • Save krzysztofjeziorny/91bb691668f45a7b3afcc1d8f2f4baaf to your computer and use it in GitHub Desktop.
Save krzysztofjeziorny/91bb691668f45a7b3afcc1d8f2f4baaf to your computer and use it in GitHub Desktop.
gulp scss workflow for styles and service worker w/ sw-precache
// Define dependencies
var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var nano = require('gulp-cssnano');
var parker = require('gulp-parker');
var run = require('gulp-run');
const workboxBuild = require('workbox-build');
// Compile sass to compressed css andd add vendor prefixes
gulp.task('styles', function() {
gulp.src('src/scss/*.scss')
.pipe(sass())
.on('error', function(error) {
console.log('\n ✖ ✖ ✖ ✖ ✖ ERROR ✖ ✖ ✖ ✖ ✖ \n \n' + error.message + '\n \n');
})
.pipe(autoprefixer({
browsers: ['last 2 versions']
}))
.pipe(nano())
.pipe(gulp.dest('../../project/static/css/'));
});
// CSS analysis tool
gulp.task('parker', function() {
return gulp.src('../../project/static/css/project.css')
.pipe(parker());
});
// Generate a Service Worker with sw-precache
gulp.task('generate-service-worker', function(callback) {
var path = require('path');
var swPrecache = require('./node_modules/sw-precache/lib/sw-precache');
var rootDir = '../../project/static';
swPrecache.write(path.join(rootDir, 'js/sw.js'), {
cacheId: 'projectID',
staticFileGlobs: [rootDir + '/**/*.{js,svg,css,png,jpg,gif,woff2}'],
stripPrefix: rootDir,
replacePrefix: '/project/static'
}, callback);
});
// watching me, watching you
gulp.task('serve', ['styles','generate-service-worker'], function() {
gulp.watch('src/scss/**/*.scss', ['styles']);
gulp.watch('../../project/static/**/*.*', ['generate-service-worker']);
});
// default task
gulp.task('default', ['serve']);
{
"name": "project",
"version": "0.0.1",
"description": "Project description",
"main": "gulpfile.js",
"author": "Your Name 2018",
"license": "AGPL",
"private": true,
"devDependencies": {
"gulp": "^3.9.1",
"gulp-autoprefixer": "^5.0.0",
"gulp-concat": "^2.6.0",
"gulp-cssnano": "^2.1.2",
"gulp-parker": "^0.1.4",
"gulp-run": "^1.7.1",
"gulp-sass": "^4.0.1",
"gulp-uglify": "^3.0.1",
"gulp-watch": "^5.0.1"
},
"dependencies": {
"node-sass": "^4.9.0",
"sw-precache": "^5.2.1"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment