How to build sourcemaps from minifyed css?

Question

I have the project:

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

In devtools this sourcemap always shows only the first file, and all code in one line. It does not show the source and line number. If I remove .pipe(cssmin()), it works as I want, but I need minification. My 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}))
        ;
    });

Thanks in advance!

score 1 · Accepted Answer · answered Mar 19 '17 at 09:50

In another branch recommended to use gulp-if-else and dont modify CSS, if it is not develop. Separate develop and 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())
});

How to build sourcemaps from minifyed css?

1 Answers1