为什么gulp中的sourcemaps没起作用

在一些工作流工具中，gulp算是比较容易上手的了，虽然以前了解过gulp，但真正的实践还是发现不少应用问题，比如这次，为什么应用了gulp-sass/gulp-sourcemaps/gulp-autoprefixer却无法获取到css-scss的映射；

先来介绍一下这几个插件：

gulp-sass：将scss编译成css，常用可配置参数有outputStyle；

plugins.sass({
    outputStyle: 'compressed'
}).on('error', plugins.sass.logError)

gulp-sourcemaps：在scss编译过程中，添加映射关系，可以方便调试；
在文件流中需要两条语句：

plugins.sourcemaps.init()
//如果要输出sourcemaps文件的话，可以在write(path)添加路径；
plugins.sourcemaps.write()

gulp-autoprefixer：根据浏览器兼容，添加浏览器所需要支持的前缀；

plugins.autoprefixer({
   browsers: ['>1%'],
   cascade: false,
   remove:false
})

以下是我尝试了两种方式可以输出sourcemaps：

第一种方式：抛弃了gulp-autoprefixer;

gulp.task('scss',function(){
 
    return gulp.src(paths.styles)
        .pipe(plugins.changed(paths.outSytles))
        .pipe(plugins.sourcemaps.init())
        .pipe(plugins.sass({
           outputStyle: 'compressed'
         }).on('error', plugins.sass.logError))
    //这种写法，autoprefixer不能加载sourcemaps中间，否则生不出map文件；
    //所以，我把它注释掉，确保能输出sourcemaps；     
        /*.pipe(plugins.autoprefixer({

• browsers: ['>1%'],

• cascade: false,

• remove:false
  }))/
  .pipe(plugins.sourcemaps.write())
  .pipe(gulp.dest(paths.outSytles))
  .pipe(plugins.livereload());

  });
  
  

第二种方式：编译、map、自动添加前缀功能俱全；

gulp.task('scss',function(){
 
    return gulp.src(paths.styles)
        .pipe(plugins.changed(paths.outSytles))
        .pipe(plugins.sourcemaps.init())
        .pipe(plugins.sass({
            outputStyle: 'compressed'
        }).on('error', plugins.sass.logError))
        //这一句write()必须有；
        .pipe(plugins.sourcemaps.write({includeContent: false}))
        .pipe(plugins.autoprefixer({
            browsers: ['>1%'],
            cascade: false,
            remove:false
        }))
        .pipe(plugins.sourcemaps.write())
        .pipe(gulp.dest(paths.outSytles))
        .pipe(plugins.livereload());
});

在gulp-sourcemaps官网上，可以看到支持gulp-autoprefixer放到plugins.sourcemaps.init()和plugins.sourcemaps.write()中间，而且，我看到网上的资料也都是这样写的，所以，这里给少部分人一些提示，如果你有类似的问题，希望能帮到你。

原链接地址；