How to create a gulp file with reusable functions - Multiple Watch points & Multiple Output destinations - gulp-watch

Question

Goal is to use this Gulp file to execute 'n' number of different source & destinations.
How can we pass the arguments(source, destination) so that the CSS-Generator task is accepting those source & destinations and giving out the separate output files.
var gulp = require("gulp"),
sass = require("gulp-sass"),
postcss = require("gulp-postcss"),
autoprefixer = require("autoprefixer"),
cssnano = require("cssnano");
var paths = {
styles: {
src1: "scss/slider-one/index.scss",
src2: "scss/slider-two/index.scss"
dest1: "slider-one",
dest2: "slider-two"
}
};
function style1() {
return (
gulp
.src(paths.styles.src1)
.pipe(sass())
.on("error", sass.logError)
.pipe(postcss([autoprefixer(), cssnano()]))
.pipe(gulp.dest(paths.styles.dest1))
);
}
exports.style1 = style1;
function style2() {
return (
gulp
.src(paths.styles.src2)
.pipe(sass())
.on("error", sass.logError)
.pipe(postcss([autoprefixer(), cssnano()]))
.pipe(gulp.dest(paths.styles.dest2))
);
}
exports.style2 = style2;
function watch() {
style1();
style2();
gulp.watch("scss/slider-one/*.scss", style1);
gulp.watch("scss/slider-two/*.scss", style2);
}
exports.watch = watch

Answer 1

Your source is scss/slider-one/index.scss & destination is slider-one and watch is scss/slider-one/*.scss.
slider-one is common in source, destination & watch.
So you can define the paths array as ["slider-one","slider-two"]
And you are calling the style1 & style2 as the callback of watch function. So you can club that and define that in one function.
And call that function inside for loop with parameters (source,destination,watch).
Full Code:
var gulp = require("gulp"),
sass = require("gulp-sass"),
postcss = require("gulp-postcss"),
autoprefixer = require("autoprefixer"),
cssnano = require("cssnano");
function runGulpSass(src,dest,watch) {
gulp.watch(watch, function() {
return gulp.src(src)
.pipe(sass())
.on("error", sass.logError)
.pipe(postcss([autoprefixer(), cssnano()]))
.pipe(gulp.dest(dest))
});
}
exports.runGulpSass = runGulpSass;
function startGulp() {
var paths = ["slider-one","slider-two"];
for(var i=0;i<paths.length;i++) {
runGulpSass("scss/"+paths[i]+"/index.scss",paths[i],"scss/"+paths[i]+"/*.scss")
}
}
exports.watch = startGulp
[Edit] If there is no common value in source, destination & watch :
Define the paths array like this :
var paths = [
["scss/slider-one/index.scss","css/slider-one","slider-one/*.scss"],
["scss/slider-two/index.scss","css/slider-two","slider-two/*.scss"]
];
And set the runGulpSass function parameter like this :
runGulpSass(paths[i][0],paths[i][1],paths[i][2])