Gulp、Less与Sourcemaps无法正常工作问题求助

Hey there, let's work through your sourcemaps issue step by step. Based on your config and setup, I can spot a couple of key problems that are breaking the sourcemap generation:

Key Issues Identified #

• Version Compatibility Conflicts: You're using Gulp 3.x with gulp-sourcemaps@2.6.4—but version 2.x of gulp-sourcemaps is built for Gulp 4+. These two versions don't play nice together. On top of that, your gulp-less@1.1.10 is an extremely old release (circa 2014), which won't properly integrate with modern sourcemap tools.
• Empty Root Less File: If your style.less only contains @import statements with no native styles, some older Less compilers struggle to generate valid sourcemaps for the imported files.

Solutions to Try #

Option 1: Downgrade Sourcemaps for Gulp 3.x (Quick Fix) #

If you want to stick with Gulp 3, you need to use a version of gulp-sourcemaps that's compatible with it. Here's how:

1. Update your package.json to use gulp-sourcemaps@^1.6.0 (the last stable version for Gulp 3):

{
  "devDependencies": {
    "gulp": "~3",
    "gulp-less": "~1.1.10"
  },
  "dependencies": {
    "gulp-sourcemaps": "^1.6.0"
  }
}

2. Run npm install to reinstall the correct dependencies.
3. Add a tiny native style to style.less (e.g., body { padding: 0; }) to give the compiler a base to attach sourcemaps to.

Option 2: Upgrade to Gulp 4+ (Long-Term Solution) #

Gulp 3 is no longer maintained, so upgrading to Gulp 4 will fix compatibility issues and give you access to modern tooling:

1. Upgrade your dependencies via npm:

npm install gulp@^4 gulp-less@^5 --save-dev
# Keep gulp-sourcemaps@2.6.4—it works with Gulp 4

2. Update your gulpfile.js to use Gulp 4's task syntax:

const gulp = require('gulp');
const less = require('gulp-less');
const sourcemaps = require('gulp-sourcemaps');

// Gulp 4 uses exports to define tasks
exports.less = function() {
  return gulp.src('src/less/style.less')
    .pipe(sourcemaps.init())
    .pipe(less())
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('dist/css'))
};

3. Add a small native style to style.less as mentioned before.

Verification Step #

After running gulp less, check your dist/css folder:

• You should see a style.css.map file
• The bottom of style.css should have this comment: /*# sourceMappingURL=style.css.map */

If both are present, your sourcemaps should now work correctly in browser dev tools.

内容的提问来源于stack exchange，提问作者Max.A