適切なソースマップを取得する（gulp sass + cleanCss + prefixer + uncss）

Question

sassをクリーンなCSS（プレフィックス付き、非CSSedおよび縮小済み）にコンパイルするためのグループをチェーンする最も良い方法は何ですか。

次の例では、ソースマップを作成しますが、ブラウザインスペクタで表示すると、ソースファイルの間違った行番号を指しています。この問題を解決しようとする試みで

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