Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
GULP: Basic configuration for GULP 4
const {src, dest, watch, series, parallel} = require('gulp'); //ES destructuring assignment
var sass = require("gulp-sass"),
autoPrefixer = require("gulp-autoprefixer"),
minifyCss = require("gulp-clean-css"),
rename = require("gulp-rename"),
concat = require("gulp-concat"),
uglify = require("gulp-uglify"),
plumber = require("gulp-plumber"),
util = require("gulp-util"),
browserSync = require("browser-sync").create(),
reload = browserSync.reload;
var srcs = {
html: ["./**/*.html"],
css: ["./assets/css/**/*.css"],
sass: ["./assets/sass/**/*.scss"],
js: ["./assets/js/*.js"],
};
function sass() {
return src("./assets/sass/sys.scss")
.pipe(plumber())
.pipe(sass())
.pipe(autoPrefixer({
browsers: ["> 5%", "last 2 versions", "not ie <=8"],
cascade: true,
remove: true
}))
.pipe(rename({
basename: "sys"
}))
.pipe(dest("./assets/css"))
.pipe(reload({
stream: true
}))
.pipe(minifyCss())
.pipe(rename({
suffix: ".m"
}))
.pipe(dest("./assets/css"))
.pipe(reload({
stream: true
}));
util.log(util.colors.yellow("website styles compied and minified"));
}
function js(){
return src("./assets/js/sys.js")
.pipe(reload({
stream: true
})); //not sure if you intentionally did not put dest() stream method
}
function browser_sync(cb) {
browserSync.init({
server: {
baseDir: "./"
},
browser: ["google chrome"]
});
const watcher = watch(srcs.html);
watcher.on('change', reload);
watcher.on("change", reload);
watch(srcs.sass, series(sass));
watch(srcs.js, series(js));
cb();
}
//this will first trigger sass() and js() functions parallel, then after executing these two, browser_sync will run
exports.default = series(parallel(sass, js), browser_sync);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment