獲取合適的源代碼（gulp sass + cleanCss +前綴+ uncss）

Question

什麼是鏈接gulp編譯sass到乾淨的css（前綴，un-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

我完成這個任務的工作，使用CSSO代替cleanCSS，但使用任何你想要的，棘手的部分是源代碼，有時會弄亂路徑。

1. 聲明源路徑
2. 初始化SourceMaps
3. 編譯SCSS到CSS
4. 添加正確的前綴支持
5. 粘貼SourceMaps中產生指向SCSS的CSS文件中的文件
6. 壓縮的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')); 
});