如何从缩小 css 构建 sourcemaps？

Question

我有项目：

project/
├── css/
│   ├── map/
|   │   └── style.min.css.map
│   └── style.min.css
└── style/
    ├── _head.sass
    ├── _nav.sass
    ├── _content.sass
    ├── _foot.sass
    └── style.sass

在 devtools 中，这个 sourcemap 总是只显示第一个文件，所有代码都在一行中。它不显示源代码和行号。如果我删除 .pipe(cssmin())，它会如我所愿地工作，但我需要缩小。我的 gulpfile:

var path = {
    build: {
        css: 'css/'
    },
    src: {
        style: 'style/*.sass'
    },
    watch: {
        style: 'style/*.sass'
    }
};

    gulp.task('style:build', function () {
    gulp.src(path.src.style)
        .pipe(sourcemaps.init())
        .pipe(plumber({errorHandler: notify.onError("Error: <%= error.message %>")}))
        .pipe(sass())
        .pipe(prefixer())
        .pipe(rename({ suffix: '.min' }))
        .pipe(cssmin())
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(path.build.css))
        .pipe(reload({stream: true}))
        ;
    });

提前致谢！

Answer 1

在另一个分支建议使用gulp-if-else并且不要修改CSS，如果不是develop。分开 develop 和 production:

// Compiling Stylus in CSS | Production
gulp.task('css-build', function() {
    gulp.src('./styl/*.styl')
        .pipe($.newer('./public/css/'))
        .pipe($.stylus({
            use: nib()
        }))
        .pipe(cmq())
        .pipe($.csso())
        .pipe($.autoprefixer('last 3 versions'))
        .pipe(gulp.dest('./public/css/'))
});

// Compiling Stylus in CSS | Develop
gulp.task('css-dev', function() {
    gulp.src('./styl/*.styl')
        .pipe($.newer('./public/css/'))
        .pipe($.sourcemaps.init())
        .pipe(
            $.stylus({
                use: nib()
            })
            .on('error', $.notify.onError({
                title  : "Stylus Error",
                message: "<%= error.message %>",
                sound: "Blow"
            }))
        )
        .pipe($.autoprefixer('last 3 versions'))
        .pipe($.sourcemaps.write())
        .pipe(gulp.dest('./public/css/'))
        .pipe($.livereload())
});

如何从缩小 css 构建 sourcemaps？

How to build sourcemaps from minifyed css?

sass

gulp

source-maps

gulp-sass

gulp-sourcemaps