sassgulpsource-mapsgulp-sassgulp-sourcemaps

How to build sourcemaps from minifyed css?


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!


Solution

  • 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())
    });