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