1

我在我的项目中使用 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。

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

4

1 回答 1

0

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

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

于 2016-07-28T19:06:24.057 回答