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