Имеется такой gulpfile
var gulp = require('gulp');
var less = require('gulp-less');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var cssmin = require('gulp-cssmin');
var autoprefixer = require('gulp-autoprefixer');
var browserSync = require('browser-sync');
var sourcemaps = require('gulp-sourcemaps');
var htmlmin = require('gulp-htmlmin');
var path = {
build: {
html: 'dist/',
js: 'dist/js',
css: 'dist/css',
img: 'dist/img',
fonts: 'dist/fonts'
},
src: {
html: 'app/*.html',
js: 'app/js/*.js',
css: 'app/css/*.css',
img: 'app/img/**/*.*',
fonts: 'fonts/**/*.*'
},
watch: {
html: 'app/*.html',
js: 'app/js/*.js',
less: 'app/less/**/*.less',
img: 'app/img/**/*.*',
fonts: 'fonts/**/*.*'
}
}
gulp.task('browser-sync', function() {
browserSync.init({
server: {
baseDir: "dist/"
}
});
});
gulp.task('less', function() {
return gulp.src('app/less/styles.less')
.pipe(less())
.pipe(gulp.dest('app/css/'))
.pipe(browserSync.reload({stream: true}))
})
gulp.task('css', function() {
return gulp.src(path.src.css)
.pipe(sourcemaps.init())
.pipe(concat('styles.css'))
.pipe(cssmin())
.pipe(autoprefixer({
browsers: ['last 4 versions'],
cascade: false
}))
.pipe(sourcemaps.write())
.pipe(gulp.dest(path.build.css))
.pipe(browserSync.reload({stream: true}))
})
gulp.task('html', function() {
return gulp.src(path.src.html)
.pipe(htmlmin())
.pipe(gulp.dest(path.build.html))
.pipe(browserSync.reload({stream: true}))
})
gulp.task('build', ['browser-sync'], function() {
gulp.watch(path.watch.less, ['less', 'css']);
gulp.watch(path.watch.html, ['html'])
})
Дело в том, что
sourcemaps
не отрабатывает как нужно. Не могу понять в чем проблема, пробовал менять последовательность pipe'ов в таске, но это ни к чему не привело. Может кто сталкивался с подобной проблемой? Буду благодарен за любые подсказки.
Вот сам скриншот проблемы, все идет одной строкой и отлаживать код невозможно после минификации.