如何包含由gulp任务创建的CSS小型化scritpt的源映射？

Question

我正在使用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"
    }
}

杯式任务

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('./'));
});

Answer 1

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

因此，对于knx.dev.css gulp构建，我已经更改了gulp，如下所示

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('./'));
});

它给了我一个源映射，也就是说，当我检查元素时，它会找到正确的文件。

Answer 2

请使用进行此操作。它可以用于许多工作。这些可以在这里找到。https://github.com/gulp-sourcemaps/gulp-sourcemaps/wiki/Plugins-with-gulp-sourcemaps-support。在使用chrome时，您将看到的不是"styles.min.css"，而是"styles.css“，以及样式的行号，这使得调试css变得更加容易。大约一个月前，我开始使用源代码地图，但至今仍未恢复。

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

绝对可以查看gulp源地图。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

现在将您的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文件和源代码地图文件放在哪里。

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

地图文件告诉google原始knx.dev.css文件在哪里。这就是它如何知道是什么行导致问题，以及它从原始文件中得到的行号。

例如。

用铬，而不是看到。

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文件时，更改映射文件的目标才有意义。

所以对于原始地图写作管道来说

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

只需将句点保持在正确的位置，这将告诉源地图将映射文件直接放在css文件所在的文件夹中。这将使现在的情况不那么令人困惑。

希望这能有所帮助。

因此，总之，您不需要使用附加的、预先准备的方法，这是建议的，如果您只是使用。这完全取决于你！:)

Answer 3

这不是javascript，所以您不能获得确切的特性，但您可以使用这将追加和预置文件路径。。

.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。