【发布时间】：2015-10-28 19:50:31
【问题描述】：
我在我的项目中使用 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 目录下的所有文件，丑化 源，编写 sourcemap 并输出 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。
我希望这是有道理的。提前谢谢你
【问题讨论】：
-
坐下来思考这个问题后，我认为问题在于我所有的SASS源都通过@import包含在public/sass/main.sass中。因此，当编译后的源代码被传递给 sourcemaps.write() 方法时，该方法并不知道哪些样式来自哪里。有人对此有解决方案吗？ 编辑： 废话，不可能是这个。开发者工具识别出样式来自 _normalize.scss，所以不可能。
标签： javascript sass gulp gulp-sourcemaps gulp-ruby-sass