如何包含由 gulp 任务创建的 CSS 缩小脚本的源映射？答案

【问题标题】：How to include source map for CSS minification scritpt created by gulp task?如何包含由 gulp 任务创建的 CSS 缩小脚本的源映射？
【发布时间】：2017-08-04 08:46:42
【问题描述】：

我正在使用 gulp 缩小 CSS。

问题是当我需要调试 CSS 时，我看到所有 CSS 都在 knx.dev.css 中，但是我需要在检查元素时构建一个解决方案，它可能会导致生成它的原始文件

package.json

{
    "main": "index.js",
    "dependencies": {
      "gulp": "^3.9.1"
    },
    "devDependencies": {
          "gulp-bundle-files": "^1.9.5110",
          "gulp-concat": "^2.6.1",
          "gulp-cssmin": "^0.2.0",
          "gulp-rename": "^1.2.2"
    },
    "scripts": {
          "build": "gulp",
          "start": "gulp dev_css"
    }
}

Gulp 任务

var gulp = require('gulp');
var cssmin = require('gulp-cssmin');
var rename = require('gulp-rename');
var concat = require('gulp-concat');
var css_file_list = [
  //List of files];

gulp.task('default', function () {
    gulp.src(css_file_list)
        .pipe(cssmin())
        .pipe(rename({suffix: '.min'}))
        .pipe(concat('knx.min.css'))
        .pipe(gulp.dest('./'));
});
gulp.task('dev_css', function () {
    gulp.src(css_file_list)
        .pipe(concat('knx.dev.css'))
        .pipe(gulp.dest('./'));
});

【问题讨论】：

标签： css gulp package.json

【解决方案1】：

请为此使用 gulp-sourcemaps。它可以用于许多工作。这些可以在这里找到。 https://github.com/gulp-sourcemaps/gulp-sourcemaps/wiki/Plugins-with-gulp-sourcemaps-support 。在 chrome 中使用检查时，您将看到“styles.css”以及样式来自的行号，而不是看到“styles.min.css”，这使得调试 css 变得更加容易。我大约一个月前开始使用 sourcemaps 并且没有回头。

我经常使用它来将 scss 编译为 css。在我的 chrome 检查中，我看到了原始的 styles.scss 和行号，而不是它编译成的 styles.css，所以我知道问题在我的 scss 文件中的位置。

一定要查看 gulp sourcemaps。 https://www.npmjs.com/package/gulp-sourcemaps

你会更加爱自己:)

编辑

要扩展 Ramratan 的答案，您可以在其中使用管道 .pipe(sourcemaps.write())，如果您不希望 .maps 文件与已编译的 CSS 文件夹位于同一文件夹中，则可以在此处指定您希望它们的位置。

更新 #2 更清晰。

现在你有 >

gulp.task('dev_css', function () {
    gulp.src(css_file_list)
        .pipe(concat('knx.dev.css'))
        .pipe(gulp.dest('./'));
});

使用 npm i --save-dev gulp-sourcemaps 安装 gulp 源映射需要 gulp 文件顶部的源映射 var sourcemaps = require('gulp-sourcemaps');

现在将你的 dev_css 任务更改为 >

gulp.task('dev_css',function () {
  return gulp.src(css_file_list)
    .pipe(sourcemaps.init())
    .pipe(concat('knx.dev.css'))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('Name of destination folder'));
});

此时，您的 gulp.dest 指向的位置，就是您连接的 css 文件和 sourcemap 文件将被放置的位置。

所以你可能会看到类似的东西。 -CSS 文件夹 --knx.dev.min.css --knx.dev.css.map

地图文件告诉谷歌浏览器原始 knx.dev.css 文件在哪里。这就是它知道哪一行导致问题以及它来自原始文件中的哪一行的方式。

例如。

在 chrome 中，而不是看到。

Line 1 from knx.dev.min.css
body {
margin:0;
padding:0;
}

你会看到的。

Line 200 from knx.dev.scss
    body {
    margin:0;
    padding:0;
    }

希望这是有道理的！

此外，关于更改地图文件的目的地，如果您只使用那个 css 文件，则不必担心将地图文件更改为其他位置。如果您使用一堆 css 文件，这仅对更改地图文件的目标有意义。

所以对于 sourmapswrite 管道

.pipe(sourcemaps.write('.'))

只要把句号保留在那里，它会告诉 sourcemaps 将地图文件放在你的 css 文件所在的同一个文件夹中。这将减少现在的混乱。

希望这会有所帮助。

总而言之，如果您只使用 gulp-sourcemaps，则不需要使用建议的 append, prepend 方法。这完全取决于你！ :)

【讨论】：

你能解释更多...if you don't want them in the same folder ..，用我的答案的当前解决方案，源图最后附加到knx.dev.css，你的意思是说我可以指定新路径而不是附加？
没问题，我会在一分钟内更新我的原始答案。您不必使用前面提到的 append prepend 方法。这是使用 gulp sourcemaps 时不需要的额外工作，我会在几分钟内更新我的答案并提供更多详细信息
为你更新了我原来的答案。
会在星期二看，因为现在办公时间结束了，我在印度有长周末，:)，我明白你的意思了。

【解决方案2】：

这不是javascript，所以你不能得到确切的功能，但你可以使用this to append and prepend file path。

.pipe(addsrc.prepend('files/js/constants.js'))  // we use `addsrc.prepend` to add our .js files to begining of the SRC array
.pipe(addsrc.append('files/js/conflict.js'))    // we use `addsrc.append` to add our .js files to end of the SRC array

在 CSS 文件中，您可以在每 200 行之后添加注释，例如哪个文件，因此在导航 knx.min.css 时，您可以知道需要在哪个文件中更改 CSS。

【讨论】：

【解决方案3】：

@muneer-alam 你的想法可行，但我找到了另一种使用gulp-sourcemaps的方法

所以对于knx.dev.css gulp build 我已经改变了 gulp build 如下

var sourcemaps = require('gulp-sourcemaps');
.
.
.
gulp.task('dev_css',function () {
  return gulp.src(css_file_list)
    .pipe(sourcemaps.init())
    .pipe(concat('knx.dev.css'))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('./'));
});

它给了我一个源映射，即当我检查元素时转到正确的文件。

【讨论】：