Instantly share code, notes, and snippets.

Embed
What would you like to do?
Example gulp settings for easy frontend development. https://romanvesely.com/easy-frontend-development/
const { src, dest, series, parallel, watch } = require("gulp");
const del = require("del");
const browserSync = require("browser-sync").create();
const nunjucks = require("gulp-nunjucks");
const less = require("gulp-less");
const concat = require("gulp-concat");
const groupCSSMediaQueries = require("gulp-group-css-media-queries");
const package = require("./package.json");
const siteName = package.name || "Template";
const paths = {
dist: "dist",
styles: {
src: ["src/css"],
dist: "dist/css"
},
scripts: {
src: ["src/js/**/*.*"],
dist: "dist/js"
},
files: {
src: "src/*.html",
dist: "dist"
},
images: {
src: ["src/img/**/**.*"],
dist: "dist/img"
}
};
const clean = () => del([paths.dist]);
const styles = () =>
src(paths.styles.src + "/**/*.css")
.pipe(less())
.pipe(groupCSSMediaQueries())
.pipe(concat("styles.css"))
.pipe(dest(paths.styles.dist))
.pipe(browserSync.stream());
const scripts = () =>
src(paths.scripts.src)
.pipe(dest(paths.scripts.dist))
.pipe(browserSync.stream());
const generate = () =>
src(paths.files.src)
.pipe(nunjucks.compile({ env: process.env.NODE_ENV, siteName }))
.pipe(dest(paths.files.dist));
const images = () => src(paths.images.src).pipe(dest(paths.images.dist));
const reload = done => {
browserSync.reload();
done();
};
const watching = () => {
browserSync.init({
open: false,
server: paths.dist
});
watch(paths.styles.src, styles);
watch(paths.scripts.src, scripts);
watch(paths.images.src, images);
watch(["src/**/*.html", paths.images.src], series(generate, reload));
};
const createAll = parallel(styles, scripts, images, generate);
exports.clean = clean;
exports.generate = generate;
exports.watch = series(clean, createAll, watching);
exports.default = series(clean, createAll);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment