Gulp 4.x with Sass, JS, BrowserSync

readme.md

What is this mess?

The gulpfile in this gist demostrates how to make a simple static site using .kit files, serve the compiled kit files via browsersynce complete with streaming (no-reload) CSS changes and reloading when kit or js is compiled.

Directory Structure

This is the directory structure that the gulpfile uses.

-root

--/assets

----/images

----/js

--/dist

--/src

----/partials <--kit files

---/scss

--/_gulp <-- gulpfile.js + package.json goes here

gulpfile.js

// Load plugins
const gulp = require("gulp");
const sass = require('gulp-sass');
const cleanCSS = require('gulp-clean-css');
const gulpif = require('gulp-if');
const rename = require('gulp-rename');
const kit = require('gulp-kit-2');
const { series, watch } = require("gulp");
const browsersync = require('browser-sync').create();


//configurate
let watchMe = false;
const appDefaults = {
        stylesDir : "../src/scss/", // path to styles
        stylesDirDest : "../dist/assets/css",
        watchJavascript : "../js/app.js",
        dest : "../dist"
    }

// Styles
function kitCompile (done) {
    gulp.src('../*.kit')
        .pipe(kit())
        .pipe(gulp.dest(appDefaults.dest));
    done();
};
function sassCompile(done) {
    gulp.src(appDefaults.stylesDir+'**/*.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest(appDefaults.stylesDirDest))
        .pipe(rename({ suffix: '.min' }))
        .pipe(cleanCSS({debug: true, level: {1: {specialComments: 'all'}}}, (details) => {
        }))
        .pipe(gulp.dest(appDefaults.stylesDirDest))
        .pipe(gulpif(watchMe === true, browsersync.stream()));
    done();
}

function browsersyncServe(cb){
    browsersync.init({
        server: {
            baseDir: '../dist/'
        }
    });
    cb();
}

function browsersyncReload(cb){
    browsersync.reload();
    cb();
}

function browsersyncNotify(cb){
    browsersync.notify("sass compile");
    cb();
}

function copyAssets(done ){
    gulp.src('../assets/**/*').pipe(gulp.dest(appDefaults.dest + '/assets'));
    done();
}
exports.kitCompile = series(kitCompile);

function watchTask(){
    watchMe = true;
    watch(['../**/*.kit'], series(kitCompile, browsersyncReload));
    watch(['../assets/**/*'], series(copyAssets, browsersyncReload))
    watch(['../**/*.scss'], series(kitCompile, sassCompile, browsersyncNotify));
}
// tasks run from terminal
exports.watch = series( kitCompile, sassCompile, copyAssets, browsersyncServe, watchTask);
exports.default = series(kitCompile, sassCompile, copyAssets);

package.json

{
  "name": "gulp-and-kit",
  "version": "0.0.1",
  "dependencies": {
    "browser-sync": "^2.26.14",
    "gulp-if": "^3.0.0",
    "gulp-kit-2": "^0.2.2",
    "node-sass": "^4.9.4",
    "npm": "^6.4.1"
  },
  "scripts": {
    "gulp-default": "gulp"
  },
  "devDependencies": {
    "gulp": "^4.0.0",
    "gulp-clean-css": "^3.9.2",
    "gulp-concat": ">=2.6.1",
    "gulp-rename": ">=1.2.2",
    "gulp-sass": ">=4.0.0",
    "browser-sync": ">=2.0.0"
  },
  "engines": {
    "node": ">0.8.0"
  }
}