使用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源代码)，自动为源代码添加前缀，编写源代码映射和输出公共/css/main.css

• 'scripts'连接公共/js目录下的所有文件写一个源映射并输出public/js/min/main.js

在这整个过程之后，我希望留下public/css/main.css包含所有我编译的，自动前缀的，最小化的SASS源代码和public/js/min/main.js包含所有我连接的，最小化的JavaScript源代码。

目前，开发人员工具中的样式显示filename _box-sizing。scss(它是public/sass/import/lib/neat的依赖项)，一个不包含我正在检查的元素的样式的文件。文件名应该是_header。Sass (from 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

Answer 2

我在注释掉gulpfile.js中的css美化代码后做出了决议

//.pipe(cssbeautify()) OR

//.pipe(uglify())