如何为gulp任务创建的CSS缩小scritpt包含源地图？_Css_Gulp_Package.json

如何为gulp任务创建的CSS缩小scritpt包含源地图？

css gulp

如何为gulp任务创建的CSS缩小scritpt包含源地图？,css,gulp,package.json,Css,Gulp,Package.json,我正在使用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缩小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('./'));
});

这不是javascript，所以您无法获得确切的功能，但您可以使用

在CSS文件中，你可以在每200行之后添加注释，比如哪个文件的注释，这样当你在

knx.min.CSS

中导航时，你可以知道你需要在哪个文件中更改CSS。

这不是javascript，所以你无法获得确切的功能，但你可以使用它

在CSS文件中，你可以在每200行之后添加注释，比如哪个文件的注释，这样在

knx.min.CSS

中导航时，你就可以知道你需要在哪个文件中更改CSS。

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

gulp sourcemaps

因此，对于

knx.dev.css

gulpbuild，我对gulpbuild进行了如下更改

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

它给了我一个源代码图，即当我检查元素时将进入正确的文件。

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

gulp-sourcemaps

因此，对于

knx.dev.css

gulpbuild，我对gulpbuild进行了如下更改

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

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

请使用gulp sourcemaps。它可以用于许多工作。这些可以在这里找到。当在chrome中使用inspect时，您将看到“styles.min.css”，而不是“styles.css”，以及该样式的行号，这使得调试css变得更加容易。我大约在一个月前开始使用sourcemaps，现在还没有回头

我经常使用它将SCS编译为css。在chrome inspect中，我看到的是原始的styles.scss和行号，而不是它编译到的styles.css，因此我知道问题在我的scss文件中的位置

一定要看看GulpSourceMaps。

你会更加爱自己：）

编辑

要扩展Ramratan的答案，即pipe

.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 sourcemaps--保存开发人员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文件和sourcemap文件的位置

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

映射文件告诉google chrome原始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文件时，更改地图文件的目的地才有意义

所以对于sourmapswrite管道

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

只需将句点保留在那里，这会告诉sourcemaps将地图文件放在css文件所在的同一文件夹中。这将减少目前的混乱

希望这有帮助

总之，如果只使用gulp sourcemaps，就不需要使用append、prepend方法。但这完全取决于你自己！：）

请使用gulp sourcemaps进行此操作。它可以用于许多工作。这些可以在这里找到。当在chrome中使用inspect时，您将看到“styles.min.css”，而不是“styles.css”，以及该样式的行号，这使得调试css变得更加容易。我大约在一个月前开始使用sourcemaps，现在还没有回头