gulp sourcemap 已创建但无法正常工作答案

【问题标题】：gulp sourcemap is created but not workinggulp sourcemap 已创建但无法正常工作
【发布时间】：2016-02-05 18:38:11
【问题描述】：

样式

styles.less

@import "one.less";
@import "two.less";

一个.less

body { background:red; }

两个.less

body { font-size: 12px; }

Gulpfile.js

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

gulp.src('./src/assets/less/styles.less')
  .pipe(less())
  .pipe(sourcemaps.init({loadMaps: true}))
  .pipe(sourcemaps.write('./'))
  .pipe(gulp.dest('./dist/css/'));

结果： styles.css + styles.map.css 已创建，但当我进入网页时地图文件未加载（并且当我检查“body”时，我看到了样式。 css)

链接
少喝 - https://github.com/plus3network/gulp-less
gulp-sourcemaps - https://github.com/floridoo/gulp-sourcemaps

我很沮丧，我会很感激任何帮助。谢谢。

【问题讨论】：

标签： javascript css gulp

【解决方案1】：

在初始化 sourcemap 插件之前，你“管道”到less()，正确的方法是：

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

gulp.src('./src/assets/less/styles.less')
  .pipe(sourcemaps.init({loadMaps: true}))
  .pipe(less())//<<< between init and write
  .pipe(sourcemaps.write('./'))
  .pipe(gulp.dest('./dist/css/'));

【讨论】：

叹息..你是对的。即使我是 gulp 的新手，这应该是有道理的。非常感谢。
我现在也在尝试缩小它，所以我正在使用 .pipe(minifyCSS()) - 文件确实被缩小了，但我提到的同样的问题又发生了

【解决方案2】：

好的，这就是我应该使用的 - https://github.com/radist2s/gulp-less-sourcemap

【讨论】：

【解决方案3】：

在我的例子中，我在init 和write 之间编写了代码，但仍然无法在浏览器中加载地图

gulp.task('css-task',async function(){
    return gulp.src('project/public/sass/main.scss')
            .pipe(sourcemaps.init()) // init the source map
            .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
            .pipe(prefix('last 2 versions'))
            .pipe(sourcemaps.write('.'))
            .pipe(gulp.dest('dist/public/css'))
            .pipe(livereload());
});

我将loadMaps: true 添加到sourcemaps.init() 并且一切正常

gulp.task('css-task',async function(){
    return gulp.src('project/public/sass/main.scss')
            .pipe(sourcemaps.init({loadMaps: true})) // init the source map 
            ...
            .pipe(sourcemaps.write('.'))
            .pipe(gulp.dest('dist/public/css'))
            .pipe(livereload());
});

【讨论】：