gulp-sass autoprefix源地圖

Question

這個週末我開始玩弄吞噬。我想成立一​​個任務，可以

• 編譯我頂嘴文件
  • 繼續工作，如果我在SASS文件犯錯誤
  • 與青菜引導工作
• 產生sourcemaps
• 附加瀏覽器前綴
• 注入已編譯的css wihtout瀏覽器重新加載
• 快（1-2 S IN開發ENV頂部）

我得到了大部分的步驟，但瀏覽器的前綴給了我一個困難時期 這是我走到這一步，

var browserSync = require('browser-sync'); 
var reload = browserSync.reload; 
var filter = require('gulp-filter'); 
var gulp = require('gulp'); 
var sass = require('gulp-sass'); 
var autoprefixer = require('gulp-autoprefixer'); 
var notify = require("gulp-notify"); 
var sourcemaps = require('gulp-sourcemaps'); 
var concat = require('gulp-concat'); 

var config = { 
    sassPath: './sass', 
    bower: './bower_components', 
    bootstrap: './bower_components/bootstrap-sass-official/assets/stylesheets', 
    fonts: './bower_components/bootstrap-sass-official/assets/fonts' 
}; 

gulp.task('sass', function() { 
    return gulp.src(config.sassPath + '/**/*.scss') 
     .pipe(sourcemaps.init()) 
      .pipe(sass({ 
       //outputStyle: 'compressed', 
       outputStyle: 'nested', 
       precision: 10, 
       includePaths: [ 
        config.sassPath, 
        config.bower, 
        config.bootstrap 
       ], 
       onError: function (err) { 
        notify().write(err); 
       } 
      })) 
      .pipe(concat('app.css')) 
      .pipe(autoprefixer('last 2 version')) 
     .pipe(sourcemaps.write()) 
     .pipe(gulp.dest('css')) 
     .pipe(filter('**/*.css')) // Filtering stream to only css files 
     .pipe(browserSync.reload({stream:true})); 
}); 

gulp.task('browser-sync', function() { 
    browserSync({ 
     logLevel: "info", 
     server: { 
      baseDir: './', 
      //directory: true, 
      routes: { 
       "/fonts": config.fonts 
      } 
     } 
    }); 
}); 

gulp.task('default', ['sass', 'browser-sync'], function() { 
    gulp.watch(['./**/*.html', 'js/**/*.js'], reload); 
    gulp.watch('sass/*.scss',['sass']); 
}); 

問題是autoprefixer給我一個錯誤，並弄亂了源地圖

我得到的錯誤：「gulp-sourcemap-write：未找到源文件：C：\ WEB \ skilldrill_v1 \ skilldrill \ sass \ app.css」

因此，由於某種原因，它試圖找到的CSS文件在sass目錄

[編輯]
我設法找到問題，但還不能解決它。 管這個事情的作品：吞掉-autoprefixer - >做一些東西 - >前綴的任務 - >乙烯基sourcemaps申請

在一飲而盡，autoprefixer \ index.js的第35行：applySourceMap（文件，res.map的ToString（））; 從這個角度來看，vinyl-sourmaps-apply會理解當前文件（在我的情況下是app.css）也會成爲源文件。

這裏有問題： 一）認爲CSS文件是在gulp.src規定（），它通常是不正確的 二）它不與添加的行只能工作在同一文件夾autoprefixer，但增加了對每一行的參考

你有任何想法基於這些信息？我開始挖掘吞噬連接，正確處理類似的問題。

Answer 1

我對autoprefixer和sourcemaps有同樣的問題。在編譯sass之後，我更改了工作流以創建源映射，然後在運行autoprefixer時再次將其加載到gulp-sourcemaps中，最後創建更新的源映射。

// Compile Sass 
.pipe(sourcemaps.init()) 
    .pipe(sass()) 
.pipe(sourcemaps.write()) 
.pipe(gulp.dest('../public/assets/css')) 

// Autoprefix 
.pipe(sourcemaps.init({loadMaps: true})) 
    .pipe(autoprefixer('last 2 version', 'ie 8', 'ie 9')) 
.pipe(sourcemaps.write('./')) 
.pipe(gulp.dest('../public/assets/css')) 

然後只能觀察樣式注入的css文件。

// CSS Injection 
.pipe(filter('**/*.css')) 
.pipe(browserSync.reload({stream:true})) 

Answer 2

@ philipb3 THANK YOU !!花了2天的好時間試圖弄清楚爲什麼autoprefixer和gulp-sourcemaps不能很好地一起玩，然後當我最終解決了這個問題時，瀏覽器同步將完全重新加載，但並未注入新生成的CSS。這似乎解決了這個問題。

對於那些一開始從我的解釋中感到困惑的人來說，下面是我的一攬子文件中的一個樣例，其中包含了對發生的事情的評論。

gulp.task('sass', function() { 
    // create postcss processors 
    var processors = [ 
     mqpacker, 
     autoprefixer({ browsers: ['last 2 version'] }) 
    ]; 

return gulp.src(src.scss) 
    .pipe(sourcemaps.init()) // start sourcemaps 
    .pipe(sass({ outputStyle: 'expanded' }).on('error', sass.logError)) // compile sass 
    .pipe(sourcemaps.write()) // write map inline 
    .pipe(gulp.dest(src.css)) // pipe to css dir 
    .pipe(sourcemaps.init({loadMaps: true})) // init sourcemaps again after pipe to dest dir 
    .pipe(postcss(processors)) // run postcss stuff 
    .pipe(sourcemaps.write('./maps')) // write map to external dir instead of inline 
    .pipe(gulp.dest(src.css)) // pipe to dest dir again 
    .pipe(filter('**/*.css')) // filter out everything that isn't a css file 
    .pipe(reload({ stream: true })); // pipe result to browser-sync for reload 
}); 

編輯：所以這最終也開始再度爆發的時候，我開始加入一些更多的任務和插件我一口構建。我不完全確定有必要兩次加載源地圖。我重建了我的gulp文件，從gulp-sass和gulp-sourcemaps開始，即使在配置完其他任務後，這似乎也適用於我。希望這兩種解決方案中的一種可以爲某人工作。

相關插件：

var gulp = require('gulp'); 
var sass = require('gulp-sass'); 
var sourcemaps = require('gulp-sourcemaps'); 

//** Post CSS Modules **// 
var postcss = require('gulp-postcss'); 
var autoprefixer = require('autoprefixer'); 
var mqpacker = require('css-mqpacker'); 

如果您使用的瀏覽器同步：（還設置了手表/服務任務）

//** Browser-Sync **// 
var browserSync = require('browser-sync').create(); 
var reload = browserSync.reload; 

來源：更改這些相應

var src = { 
    base: 'ROOT_FOLDER', 
    js:  'ROOT_FOLDER/js/**/*.js', 
    css: 'ROOT_FOLDER/css', 
    html: 'ROOT_FOLDER/*.html', 
    jsdir: 'ROOT_FOLDER/js', 
    maps: './maps', 
    scss: 'ROOT_FOLDER/scss/**/*.scss' 
}; 

任務

gulp.task('sass', function() { 
    // load post-css plugins 
    var processors = [ 
     mqpacker, 
     autoprefixer({ 
      browsers: ['last 2 version'] 
     }) 
    ]; 
    // start sass task 
    return gulp.src(src.scss) 
     .pipe(sourcemaps.init()) // init sourcemaps 
     .pipe(sass.sync({outputStyle: 'expanded'}).on('error', sass.logError)) // compile scss 
     .pipe(postcss(processors)) // autoprefix and combine media queries 
     .pipe(sourcemaps.write(src.maps)) // write emaps relative to source dir 
     .pipe(gulp.dest(src.css)) // pipe to css folder 
     .pipe(browserSync.stream()); // send stream to browser-sync task 
});