gulp-sass自动重定位源映射

Question

这个周末我开始玩Gulp。我想建立一个任务

• 编译我的sass文件
  • 如果我在sass文件中出错，请继续工作
  • 使用sass引导程序

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

  因此出于某种原因,它会尝试在sass目录中查找css文件

  [编辑]
  我找到了问题，但还无法解决。这个东西工作的管道：gulp-autoprefixer->做一些事情->前缀任务->vinyl-sourcemaps-apply

  在gulp-autoprefixer\index.js的第35行：applySourceMap（file,res.map.toString（））；从这一点开始，vinyl-sourmaps-apply理解当前文件（在我的例子中是app.css）也成为一个源代码。

Answer 1

我在autoprefixer和SourceMaps上也遇到过同样的问题。我更改了工作流，在编译sass之后创建sourcemaps，然后在运行autoprefixer时再次加载到gulp-sourcemaps，最后创建更新的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}))