I have a problem with returns in a special function that I'm using to generate styles.
I have 3 stylesheets to generate, that have different file names/variables. So I created a function instead of duplicating the code.
The problem I'm having is these task do not complete. I tried adding callback functions to the sass task, it does finish the task but it seems the generateStyles just never really returns or finish.
What am I missing?
Thanks in advance,
gulp.task('sass', function () {
generateStyle('summer');
generateStyle('winter');
generateStyle('spring');
});
function generateStyle(season) {
if (season == undefined) {
console.log('no season setted in generateStyle');
return;
}
return gulp.src('assets/styles/all.scss')
.pipe(insert.prepend('@import "assets/styles/seasons/'+ season +'.scss";'))
.pipe(sass({includePaths: ['node_modules'],outputStyle: 'compressed'}).on('error', sass.logError))
.pipe(sourcemaps.write())
.pipe(rename('all-'+ season +'.css'))
.pipe(gulp.dest(assetsOutputPath + 'css'));
// should I add a callback here? or a promise?
}
// Main watch
gulp.task('default', function() {
gulp.watch('assets/styles/**/*.scss', gulp.series('sass'));
});
From what I understood, the task itself must return a stream. So I wrapped the stylesheets into individual tasks and it works, without the use of callbacks or promise. See below.
// The function
function generateStyle(season) {
if (season == undefined) {
console.log('no season setted in generateStyle');
return;
}
return gulp.src('assets/styles/all.scss')
.pipe(insert.prepend('@import "assets/styles/seasons/'+ season +'.scss";'))
.pipe(sass({includePaths: ['node_modules'],outputStyle: 'compressed'}).on('error', sass.logError))
.pipe(sourcemaps.write())
.pipe(rename('all-'+ season +'.css'))
.pipe(gulp.dest(assetsOutputPath + 'css'));
}
// Individual tasks
gulp.task('styles-winter', function(){
return generateStyle('winter');
});
gulp.task('styles-spring', function(){
return generateStyle('spring');
});
gulp.task('styles-summer', function(){
return generateStyle('summer');
});
// Main watch
gulp.task('default', function() {
gulp.watch('assets/styles/**/*.scss', gulp.series('styles-winter', 'styles-summer', 'styles-spring'));
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.