Gulp-cssmin 인라인 소스 맵 작동 방지

Question

gulp-cssmin을 사용하여 CSS를 축소하는 Gulpfile이 있으며 gulp-sourcemaps (아래 코드 참조)를 사용하여 인라인 소스 맵을 얻으려고합니다. Cssmin을 통해 아무 것도 파이핑하지 않으면 내 인라인 소스 맵이 완전히 작동합니다. 그러나 내 'sass'작업이 끝나면 Cssmin을 통해 모든 것을 처리하려고 할 때 인라인 소스 맵이 작동하지 않습니다.

// Compile SASS to CSS, add vendor prefixes, write sourcemaps, then minify 

gulp.task('sass', function(){ 
    return gulp.src([paths.sass, '!./_styles/_sass/_partials/**/*.scss']) 
    .pipe(sourcemaps.init()) 
    .pipe(sass().on('error', sass.logError)) 
    .pipe(autoprefixer(autoprefixerOptions)) 
    .pipe(sourcemaps.write()) 
    .pipe(cssmin()) 
    .pipe(gulp.dest('./_styles')); 
}); 

누구나 내가 여기에서 놓친 것에 대한 아이디어가 있습니까? 아니면 내가 잘못된 순서로 물건을 가져왔다면? 인라인 소스 맵은 축소 된 CSS에서도 여전히 작동합니까? 또는 꿀꺽 꿀꺽 거리는 cssmin과 특별히 다른가요?

스택 오버플로에서 gulp-cssmin과 관련된 소스 맵을 특별히 처리 한 이전 답변을 찾을 수 없으므로 계몽하십시오!

감사합니다.

Answer 1

나는 https://www.npmjs.com/package/gulp-cssmin을 사용하고 있다고 가정합니다.

gulp-cssmin은 css를 청소하기 위해 https://www.npmjs.com/package/clean-css을 사용하므로 clean-css 옵션을 적용합니다. cssmin에 전달되는 CSS를 이미 소스 맵을 포함하고 있기 때문에 그러나, 청소 - CSS를 위해 전달 될 필요가 있지만, 이것은 분명히 현재 일어나고되지 않습니다

• 가 작게를 위해 입력 소스 맵을 통과해야() 두 번째로 두 번째 예에서 볼 수 있듯이 인수 : https://github.com/jakubpawlowicz/clean-css/blob/master/README.md#how-to-work-with-source-maps
• 하지만 작게하다()는 여기에 호출하지 않습니다 :

https://github.com/chilijung/gulp-cssmin/blob/master/index.js#L42는 따라서 현재 소스 맵을 업데이트 할 꿀꺽 - cssmin를 구성 할 수있을 것 같지 않습니다.

누락 된 기능 추가 요청 문제 https://github.com/chilijung/gulp-cssmin/issues/22을 추가했습니다.

나는 또한 소스지도를 뒤에서 청소 CSS를 사용 및 지원 https://www.npmjs.com/package/gulp-clean-css을 발견

UPDATE! 즉 sourcemaps.write() 전에 cleanCSS()를 이동

var cleanCSS = require('gulp-clean-css'); 

gulp.task('sass', function(){ 
    return gulp.src([paths.sass, '!./_styles/_sass/_partials/**/*.scss']) 
    .pipe(sourcemaps.init()) 
    .pipe(sass().on('error', sass.logError)) 
    .pipe(autoprefixer(autoprefixerOptions)) 
    .pipe(cleanCSS()) 
    .pipe(sourcemaps.write()) 
    .pipe(gulp.dest('./_styles')); 
}); 

:

당신은 당신의 코드를 업데이트해야합니다. 당신이 https://www.npmjs.com/package/gulp-cssmin를 사용하는 https://github.com/floridoo/gulp-sourcemaps/wiki/Plugins-with-gulp-sourcemaps-support