[gulp 4]: Trying to run Gulp4 to convert SCSS to CSS - css

Question

I tried to run the gulp to covert SCSS to CSS，the gulp is working wihout any error but there aren't have any css files output to the target folder, I also tried to change the output path but it still didn't work，and my code is below :
// gulpfile.js
var gulp = require('gulp');
var sass = require('gulp-sass')(require('node-sass'));
var autoprefixer = require('gulp-autoprefixer');
var sourcemaps = require('gulp-sourcemaps');
var plumber = require('gulp-plumber');
var browserSync = require('browser-sync').create();
var notify = require('gulp-notify');
var sassLint = require('gulp-sass-lint');
var styleLink = {
sassLink: 'src/**/*.(scss|sass)',
OutputLink: '../css'
}
var browserSyncLink = {
root: '../',
watchHtml: '../*.html',
watchJS: '../*.js'
}
// notify
function showErrorNotify(error) {
var args = Array.prototype.slice.call(arguments);
// Show notification
notify.logLevel(0);
notify
.onError({
title: '[' + error.relativePath + '] Error',
message: '<%= error.messageOriginal %>',
sound: 'Pop'
})
.apply(this, args);
// Keep gulp from hanging on this task
this.emit('end');
}
// sass task
function sassTask() {
return gulp.src(styleLink.sassLink, { sourcemaps: true })
.pipe(sass()) // compile SCSS to CSS
.pipe(autoprefixer())
.pipe(gulp.dest('./', { sourcemaps: '.' }));
}
function browserSyncServer(cb) {
browserSync.init({
server: {
baseDir: browserSyncLink.root
}
})
cb();
}
function browserSyncLoad(cb) {
browserSync.reload();
cb();
}
function sassLinkTask() {
return gulp
.src(styleLink.sassLink)
.pipe(
plumber({
errorHandler: showErrorNotify
})
)
.pipe(sassLint())
.pipe(sassLint.format())
.pipe(sassLint.failOnError());
}
function watchTask() {
gulp.watch('../*.html', browserSyncLoad);
gulp.watch(['src/**/*.+(scss|sass)', '../js/*.js'], gulp.series(gulp.parallel(sassTask, sassLinkTask), browserSyncLoad));
}
exports.default = gulp.series(gulp.parallel(sassTask, sassLinkTask), browserSyncServer, watchTask);
when I ran this code i alos didn't get any error.
It seems no error..
Could anyone please help me ? Thanks.
and please excuse my poor English...

Answer 1

In your watchTask you have this:
src/**/*.+(scss|sass) note the + sign before the alternation.
But in your styleLink variable you have:
var styleLink = {
sassLink: 'src/**/*.(scss|sass)',
OutputLink: '../css'
}
Change to sassLink: 'src/**/*.+(scss|sass)',