javascript - 使用 gulp-sourcemaps 的文件名不正确

Question

我在项目中使用 gulp-sourcemaps 来处理我的 SASS 和 JavaScript。我的 gulpfile.js 正确生成了 .map 文件，尽管 Chrome 在开发人员工具和控制台中显示了错误的文件名。目前我不确定问题出在哪里。

我的项目树:

gulpfile.js
public/
  sass/
    main.sass
    import/
      [.. more files and directories (all imported in main.sass) ..]
   js/
     main.js
     test.js
     min/
       sourcemaps/
         main.js.map
       main.js
       all.js
    css/
      main.css
      sourcemaps/
        main.css.map

我的 gulpfile.js

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var sass = require('gulp-ruby-sass');
var plumber = require('gulp-plumber');
var prefix = require('gulp-autoprefixer');
var sourcemaps = require('gulp-sourcemaps');

var options = {
    styles: {
        "source": "public/sass/main.sass",
        "destination": "public/css",
        "sourcemaps": "sourcemaps"
    },
    scripts: {
        "source": "public/js/*.js",
        "destination": "public/js/min",
        "sourcemaps": "sourcemaps"
    }
}

gulp.task('styles', function() {
return sass(options.styles.source, {sourcemap: true, style: 'compressed'})
    .pipe(plumber())
    .pipe(prefix("last 1 version", "> 1%", "ie 8", "ie 7"))
    .pipe(sourcemaps.write(options.styles.sourcemaps))
    .pipe(gulp.dest(options.styles.destination));
});

gulp.task('scripts', function() {
    return gulp.src(options.scripts.source)
        .pipe(plumber())
        .pipe(sourcemaps.init())
        .pipe(concat('all.js'))
        .pipe(gulp.dest(options.scripts.destination))
        .pipe(rename('main.js'))
        .pipe(uglify())
        .pipe(sourcemaps.write(options.scripts.sourcemaps, {includeContent: false, sourceRoot: '../../'}))
        .pipe(gulp.dest(options.scripts.destination));
});

gulp.task('default', ['styles', 'scripts'], function() {
    gulp.watch('public/sass/**', ['styles']);
    gulp.watch('public/js/**', ['scripts']);
});

计划是:

• 'styles' 编译 public/sass/main.sass (其中包括我的所有 SASS 源)，自动为源添加前缀，写入源映射并 输出 public/css/main.css

• 'scripts' 连接 public/js 目录中的所有文件，丑化 源代码，编写源映射并输出 public/js/min/main.js

在整个过程之后，我希望留下 public/css/main.css ，其中包含我所有编译的、自动前缀的、缩小的 SASS 源代码和 public/js/min/main.js ，其中包含我所有的串联、缩小、 JavaScript 源。

目前，开发人员工具中的样式显示文件名 _box-sizing.scss (这是 public/sass/import/lib/neat 的依赖项)，该文件不包含我正在检查的元素的样式。文件名应为 _header.sass (来自 public/sass/import/layouts/common/_header.sass)。

同样，无论源文件是什么，控制台都会显示 main.js。我有 public/js/main.js 和 public/js/test.js - 这些文件应该连接并输出到 public/js/min/main.js。这两个文件仅包含一个用于测试目的的 console.log() ，并且 Chrome 中显示的文件名都是 main.js 。

我希望这是有道理的。预先感谢您

Answer 1

我也遇到了同样的问题，没有找到解决办法。也许我错了，但 gulp-Sourcemap 似乎有一个或多个问题需要解决。

https://github.com/floridoo/gulp-sourcemaps/issues/94#issuecomment-165164311