Имеется такой
gulpfile.js, установлен
sourcemapплагин. Он хорошо отрабатывает, но появляется проблема. Сначала генерируется
sourcemapпри компиляции
lessфайлов, файл css со склеенными и скомпилированными
lessфайлами добавляются в папку со всеми
cssфайлами(там лежат еще сетка и
normalize), все карты работают хорошо и в браузере показывается
lessфайл в котором находились стили, но дальше, мне нужно сделать что бы
sourcemapотрабатывал и при склеивании итоговых стилей, при том чтобы оставались карты на
lessфайлы и на файлы которые склеивались уже после компиляции, проблема в том, что после склеивания, sourcemap уже показывает ссылки не на
lessфайлы, а на конкретно уже откомпелированный
styles.cssvar gulp = require('gulp'),
less = require('gulp-less'),
autoprefixer = require('gulp-autoprefixer'),
cssmin = require('gulp-cssmin'),
sourcemaps = require('gulp-sourcemaps'),
rigger = require('gulp-rigger'),
uglify = require('gulp-uglify'),
browserSync = require('browser-sync').create(),
imagemin = require('gulp-imagemin'),
pngquant = require('imagemin-pngquant'),
concat = require('gulp-concat')
var path = {
build: {
html: 'dest',
less: 'dest/css',
js: 'dest/js',
img: 'dest/img',
fonts: 'dest/fonts',
libs: 'dest/libs',
css: 'dest/css'
},
src: {
html: 'app/*.html',
less: 'app/less/styles.less',
js: 'app/js/*.js',
img: 'app/img/**/*.*',
fonts: 'app/fonts/**/*.*',
libs: 'app/libs/**/*.*',
css: 'app/css/*.css'
},
watch: {
html: 'app/*.html',
js: 'app/js/*.js',
less: 'app/less/**/*.less',
img: 'app/img/**/*.*',
fonts: 'fonts/**/*.*',
css: 'app/css/*.css'
}
}
gulp.task('browser-sync', function() {
browserSync.init({
server: {
baseDir: "dest"
}
});
});
gulp.task('build:html', function() {
gulp.src([path.src.html, '!app/header.html'])
.pipe(rigger())
.pipe(gulp.dest(path.build.html))
.pipe(browserSync.reload({stream: true}))
})
gulp.task('build:less', function(){
gulp.src(path.src.less)
.pipe(sourcemaps.init())
.pipe(less())
.pipe(autoprefixer())
.pipe(cssmin())
.pipe(sourcemaps.write())
.pipe(gulp.dest(path.build.less))
.pipe(browserSync.reload({stream: true}))
});
gulp.task('build:css', ['build:less'], function() {
gulp.src(path.src.css)
.pipe(sourcemaps.init())
.pipe(concat('styles.min.css'))
.pipe(sourcemaps.write())
.pipe(gulp.dest(path.build.css))
})
gulp.task('build:js', function() {
gulp.src(path.src.js)
.pipe(sourcemaps.init())
.pipe(uglify())
.pipe(sourcemaps.write())
.pipe(gulp.dest(path.build.js))
.pipe(browserSync.reload({stream: true}))
})
gulp.task('build:img', function() {
gulp.src(path.src.img)
.pipe(imagemin({
progressive: true,
svgoPlugins: [{removeViewBox: false}],
use: [pngquant()],
interlaced: true
}))
.pipe(gulp.dest(path.build.img))
.pipe(browserSync.reload({stream: true}))
})
gulp.task('build:fonts', function() {
gulp.src(path.src.fonts)
.pipe(gulp.dest(path.build.fonts))
.pipe(browserSync.reload({stream: true}))
})
gulp.task('build:libs', function() {
gulp.src(path.src.libs)
.pipe(gulp.dest(path.build.libs))
.pipe(browserSync.reload({stream: true}))
})
gulp.task('watch', function() {
gulp.watch(path.watch.html, ['build:html'])
gulp.watch(path.watch.css, ['build:css'])
gulp.watch(path.watch.fonts, ['build:fonts'])
gulp.watch(path.watch.libs, ['build:libs'])
gulp.watch(path.watch.js, ['build:js'])
gulp.watch(path.watch.img, ['build:img'])
})
gulp.task('default', ['browser-sync', 'watch', 'build:html', 'build:img', 'build:css', 'build:js', 'build:libs', 'build:fonts']);
