更新Gulp后gulp watch报错，求修复可用的gulpfile.js

Hey Marion, let's sort out your Gulp 4 issues step by step! The immediate error you're seeing (missing '}') is actually a SCSS syntax mistake in your css/style.scss file, around line 19. Fix that first, and let's then update your gulpfile to properly work with Gulp 4 (your current file has some outdated patterns and redundant dependencies).

Step 1: Fix the SCSS Syntax Error #

Jump into css/style.scss, go to line 19, and check for an unclosed block (like a missing } after a selector or media query). That's the direct cause of the error you're seeing.

Step 2: Updated Gulpfile.js for Gulp 4 #

Here's a refactored, Gulp 4-compliant version of your gulpfile with improvements:

• Uses const instead of var (modern JS practice)
• Removes the redundant gulp-watch package (Gulp 4's native gulp.watch is more reliable)
• Ensures tasks return streams (required for proper task execution order in Gulp 4)
• Fixes path references for purifyCSS (adjust if your file structure differs)
• Cleaned up error handling

/*---------- Sources ----------*/
// css
const css_src = ['css/style.scss'];
const jshint_src = ['scripts/app.js'];
const js_global_src = [
 'scripts/vendor/jquery-3.1.1.min.js',
 'scripts/vendor/svg4everybody.min.js',
 'scripts/vendor/modernizr-custom.js'
].concat(jshint_src);

/*---------- Destinations ----------*/
const css_dir_final = '';
const js_file_final = 'scripts.min.js';
const js_dir_final = 'scripts/';

/*---------- Monitoring ----------*/
const watch_css = 'css/**/*.scss';
const watch_js = ['scripts/**/*.js', '!scripts/scripts.min.js'];

/*---------- Gulp & Plugins ----------*/
const gulp = require('gulp');
const plumber = require('gulp-plumber');
const sass = require('gulp-sass')(require('node-sass')); // Updated sass initialization for newer versions
const postcss = require('gulp-postcss');
const cssnano = require('cssnano');
const autoprefixer = require('autoprefixer');
const combineMq = require('gulp-combine-mq');
const jshint = require('gulp-jshint');
const concat = require('gulp-concat');
const uglify = require('gulp-uglify');
const purify = require('gulp-purifycss');

/*---------- Post CSS plugins ----------*/
const plugins = [
 autoprefixer({ browsers: ['last 2 versions', 'iOS 7'] }),
 cssnano()
];

/*------ Error Handling ------*/
const display_error = function (error) {
 console.error(`Error: ${error.message}`);
 this.emit('end');
};

/*---------- CSS Task ----------*/
gulp.task('css', function() {
 return gulp.src(css_src)
 .pipe(plumber({ errorHandler: display_error }))
 .pipe(sass({ precision: 3 }))
 .pipe(combineMq())
 .pipe(purify(['*.html', 'scripts/**/*.js'])) // Adjust paths to match your actual file structure
 .pipe(postcss(plugins))
 .pipe(gulp.dest(css_dir_final));
});

/*---------- JS Task ----------*/
gulp.task('js', function() {
 // JSHint task
 gulp.src(jshint_src)
 .pipe(plumber({ errorHandler: display_error }))
 .pipe(jshint())
 .pipe(jshint.reporter('default'));

 // JS concat & minify task
 return gulp.src(js_global_src)
 .pipe(plumber({ errorHandler: display_error }))
 .pipe(concat(js_file_final))
 .pipe(uglify())
 .pipe(gulp.dest(js_dir_final));
});

/*---------- Watch Task ----------*/
gulp.task('watch', function() {
 gulp.watch(watch_css, gulp.series('css'));
 gulp.watch(watch_js, gulp.series('js'));
});

// Default task (run with `gulp` command)
gulp.task('default', gulp.series('css', 'js', 'watch'));

Step 3: Update Package.json (Optional but Recommended) #

Remove the gulp-watch dependency since we're using Gulp 4's native watch, and update some outdated packages if needed. Here's an adjusted devDependencies section:

"devDependencies": {
 "gulp": "^4.0.2",
 "gulp-autoprefixer": "^8.0.0",
 "gulp-banner": "^0.1.3",
 "gulp-combine-mq": "^0.4.0",
 "gulp-concat": "^2.6.1",
 "gulp-cssnano": "^2.1.3",
 "gulp-jshint": "^2.1.0",
 "gulp-plumber": "^1.2.1",
 "gulp-postcss": "^9.0.1",
 "gulp-purifycss": "^0.2.0",
 "gulp-sass": "^5.1.0",
 "gulp-uglify": "^3.0.2",
 "jshint": "^2.13.6",
 "node-sass": "^7.0.3"
}

Step 4: Install Updated Dependencies #

Run this command to install the updated packages:

npm install

Final Notes #

• Double-check the paths in the purify task to make sure they match where your HTML and JS files are stored (I assumed root and scripts folder, adjust if yours are in a public subfolder like your original code had).
• If you still get errors after fixing the SCSS, check the console for more specific details—Gulp 4 gives clearer error messages once syntax issues are resolved.

内容的提问来源于stack exchange，提问作者vibewyne