Skip to content

Instantly share code, notes, and snippets.

@fuzzywalrus

fuzzywalrus/gulpfile.js

Last active Mar 9, 2021
Embed
What would you like to do?
Gulp 4.x with Sass, JS, BrowserSync

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

// 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);
{
"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"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment