如何包含由gulp任务创建的CSS缩小scritpt的源映射?

Question

我正在使用gulp缩小CSS。

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

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

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

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

一定要看看大口大口的源图。 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 安装 gulp 源映射 --save-dev gulp-sourcemaps 需要 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文件和源映射文件将被放置在哪里。

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

地图文件告诉谷歌浏览器原始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文件所在的同一文件夹中。这将使它现在不那么混乱。

希望这有帮助。

总而言之，如果您只使用 gulp-sourcemaps，则不需要使用建议的追加、前置方法。不过，这完全取决于您！:)

Answer 2

这不是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。

Answer 3

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

所以对于knx.dev.cssgulp 构建，我已经更改了 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('./'));
});

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