为什么gulp中的sourcemaps没起作用

最新推荐文章于 2024-08-31 07:18:31 发布

weixin_33713503

最新推荐文章于 2024-08-31 07:18:31 发布

阅读量317

点赞数

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000005754479

本文介绍了如何使用 gulp-sass、gulp-sourcemaps 和 gulp-autoprefixer 插件进行 CSS 编译、映射及前缀添加，并提供了两种有效输出源映射的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

原链接地址；