如何使用gulp任務創建的min CSS中的源文件當我檢查特定元素上的元素時

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

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

Answer 2

@ Muneer已阿拉姆你的想法的作品，但我發現使用gulp-sourcemaps

所以knx.dev.css一飲而盡構建另一種方式如下

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 3

請爲此使用gulp-sourcemaps。它可以用於許多工作。這些可以在這裏找到。 https://github.com/gulp-sourcemaps/gulp-sourcemaps/wiki/Plugins-with-gulp-sourcemaps-support。在chrome中使用inspect時，不會看到「styles.min.css」，您會看到「styles.css」以及樣式來自的線條編號，因爲它更容易調試您的css。大約一個月前我開始使用源代碼，並沒有回頭。

我用它很多編譯scss到CSS。在我的chrome檢查中，我看到了原始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一飲而盡sourcemaps我--save-dev的一飲而盡，sourcemaps 你一飲而盡文件 VAR sourcemaps =需要的頂部要求的sourcemaps （ '吞-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文件。這就是它如何知道哪條線路導致問題，以及它來自原始文件的線路號碼。

例如。

在鉻，而不是看到。

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方法。這完全取決於你！ :)