Gulp: paths.scss.forEach is not a function - foreach

Question

I have written the following gulp task:
var paths = require('./package.json').paths;
var watching = false;
gulp.task('scss', function () {
var processors = [
autoprefixer({
browsers: ['last 2 versions', '> 0.5%', 'ie >= 8', 'ie_mob >= 10', 'ff >= 30', 'chrome >= 34', 'ios >= 7', 'android >= 4']
}),
cssnano({
autoprefixer: false,
safe: true
})
];
var streams = merge();
var development = (gutil.env.type === 'dev10');
paths.scss.forEach(function (path) {
streams.add(gulp.src(path.scss.src + '**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(postcss(processors))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(path.dest)));
});
return streams;
});
const watch = gulp.parallel('js', 'scss');
exports.watch = watch;
Where js is another task, that is running without any error. Currently I am stuck at making this scss task work, as I am constantly receiving an error saying paths.scss.forEach is not a function. I have written the following in my package.json file that is placed in the same directory as of my gulpfile.js:
"paths": {
"js": {
"src": "../client/js/",
"dest": "../static/default/js/"
},
"scss": {
"src": "../client/scss/",
"dest": "../static/default/css/"
}
}
I am having the following traceback in the CMD:
[16:38:08] Starting 'watch'...
[16:38:08] Starting 'js'...
[16:38:08] Starting 'scss'...
[16:38:08] 'scss' errored after 84 ms
[16:38:08] TypeError: paths.scss.forEach is not a function
at D:\XYZ\gulpfile.js:92:13
at taskWrapper (D:\XYZ\node_modules\undertaker\lib\set-task.js:13:15)
at bound (domain.js:280:14)
at runBound (domain.js:293:12)
at asyncRunner (D:\XYZ\node_modules\async-done\index.js:55:18)
at _combinedTickCallback (internal/process/next_tick.js:73:7)
at process._tickCallback (internal/process/next_tick.js:104:9)
[16:38:08] 'watch' errored after 91 ms
[16:38:08] The following tasks did not complete: js
[16:38:08] Did you forget to signal async completion?
What should I do in this case, as I am stuck at the moment, without any ideas on how to proceed.

Answer 1

Your paths.scss is an object. forEach is a property of an array. So use a for in loop instead.
gulp.task('scss', function () {
// paths.scss.forEach(function (path) {
for (var path in paths.scss) {
console.log(path); // src, dest
streams.add(gulp.src(path + '**/*.scss')
// streams.add(gulp.src(path.scss.src + '**/*.scss')
// .pipe(sourcemaps.init())
// .pipe(sass())
// .pipe(postcss(processors))
// .pipe(sourcemaps.write('./'))
// .pipe(gulp.dest(path.dest)));
};
// return streams;
});
But you only want path.scss.src anyway - you don't want to run your sass loop over paths.scss.dest - which is what you are trying to do. Get rid of the for loop altogether:
gulp.src(paths.scss.src + '**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(postcss(processors))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(paths.scss.dest)));