올바른 소스 맵 얻기 (꿀꺽 꿀꺽 마시고 + 깨끗하게 + 접두사 + uncss)

Question

깨끗한 CSS (접두사가없는 CSSed 및 축소 된)에 sass를 컴파일하기 위해 꿀꺽 꿀꺽 삼키는 가장 좋은 방법은 무엇입니까?

다음 예제에서는 소스 맵을 생성하지만 브라우저 관리자에서 볼 때 소스 파일의 잘못된 행 번호를 가리키고 있습니다.

var plugins = require('gulp-load-plugins')(), 
    bourbon = require('node-bourbon').includePaths, 
    neat = require('node-neat').includePaths; 
gulp.task('default', function() { 
    return gulp.src('src/scss/**/*.scss') 
    .pipe(plugins.sourcemaps.init()) 
    .pipe(plugins.sass({includePaths: bourbon, includePaths: neat})) 
    .on('error',plugins.util.log.bind(plugins.util, 'Sass Error')) 
    .pipe(plugins.concat('styles.css')) 
    .pipe(plugins.uncss({html: ['dist/**/*.html']})) 
    .pipe(plugins.autoprefixer()) 
    .pipe(plugins.cleanCss()) 
    .pipe(plugins.sourcemaps.write('.')) 
    .pipe(gulp.dest('dist/css/')); 
}); 

내가 autoprefixer 및 cleanCss 전에 출력 sourcemaps에 노력이 문제를 해결하기위한 시도에서

하지만 "깔끔한"와 "Burbon"경로와 관련된 오류가 발생합니다 : 내가이 작업을 작업 Error: Broken @import declaration of "../neat" Broken @import declaration of "../colors" Broken @import declaration of "../variables" Broken @import declaration of "../grid" Broken @import declaration of "../tables"

Answer 1

, 당신의 cleanCSS 대신 CSSO를 사용하지만 원하는 것을 사용하십시오. 까다로운 부분은 소스 맵입니다. 때로는 경로를 엉망으로 만듭니다.

1. 는
2. 이 압축 파일
3. 는
4. 붙여 넣기 SourceMaps SCSS를 가리키는 생성 된 CSS 파일에 올바른 접두사 지원을 추가 CSS로 소스 경로
5. 초기화 SourceMaps
6. 컴파일 SCSS를 선언 CSS 파일 (주석을 저장하도록 패키지에 지시하지 않은 경우 소스 맵을 제거 할 가능성이 높음)
7. dest 경로 선언

는 Gulpfile는 : SASS 작업은

const gulp   = require('gulp'), 

     autoprefixer = require('gulp-autoprefixer'), 
     csso   = require('gulp-csso'), 
     sass   = require('gulp-sass'), 
     sourcemaps  = require('gulp-sourcemaps'); 


gulp.task('sass', ['sass'],() => { 

    return gulp 
    .src('src/scss/**/*.scss') 
    .pipe(sourcemaps.init()) 
    .pipe(sass().on('error', sass.logError)) 
    .pipe(autoprefixer({ browser: ['last 2 version', '> 5%'] })) 
    .pipe(sourcemaps.write()) 
    .pipe(csso()) 
    .pipe(gulp.dest('dist/css')); 
});