为什么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({

1. browsers: ['>1%'],

2. cascade: false,

3. 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()中间，而且，我看到网上的资料也都是这样写的，所以，这里给少部分人一些提示，如果你有类似的问题，希望能帮到你。

原链接地址；

关键字：gulp, 工作流, pipe, false

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！