Gulp SASS, autoprefixer, minify и sourcemaps генерируют огромный файл
Я испытываю странное поведение при использовании этой конфигурации Gulp для минимизации моих файлов SASS, генерирующих исходные карты.
'use strict';
var PATH = {
SRC_DIR: 'src/',
SRC: {
IMG: 'img/',
INDEX: 'index.html',
JS: {
DIR: 'js/',
FILE: [
'app.js',
'**/*.js',
'controller/**/*.js',
'factory/**/*.js',
'directive/**/*.js',
'model/**/*.js'
]
},
SASS: 'sass/',
TEMPLATE: 'template/'
},
DEST_DIR: 'dist/',
DEST: {
CSS: {
DIR: 'css/',
FILE: 'full.css'
},
IMG: 'img/',
JS: {
DIR: 'js/',
FILE: 'full.js'
},
LIB: 'lib/',
TEMPLATE: 'template/',
}
};
var gulp = require('gulp'),
autoprefixer = require('gulp-autoprefixer'),
concat = require('gulp-concat'),
minifyCss = require('gulp-minify-css'),
rename = require('gulp-rename'),
sass = require('gulp-ruby-sass'),
sourcemaps = require('gulp-sourcemaps');
gulp.task('styles', function() {
return sass(PATH.SRC_DIR + PATH.SRC.SASS, {
sourcemap: true,
style: 'expanded'
})
.pipe(autoprefixer({
browsers: ['last 2 version', 'safari 5', 'ie 8', 'ie 9'],
cascade: true
}))
.pipe(concat(PATH.DEST.CSS.FILE))
.pipe(gulp.dest(PATH.DEST_DIR + PATH.DEST.CSS.DIR))
.pipe(rename({suffix: '.min'}))
.pipe(minifyCss())
.pipe(sourcemaps.write())
.pipe(gulp.dest(PATH.DEST_DIR + PATH.DEST.CSS.DIR));
});
gulp.task('watch', function() {
gulp.watch(PATH.SRC_DIR + PATH.SRC.SASS + '**/*.scss', ['styles']);
});
gulp.task('default', ['watch', 'styles']);
Первый раз, когда я запускаю этот скрипт, используя gulp
это будет генерировать правильный full.min.css
и он ждет изменений в каталоге SASS.
Когда вы изменяете что-то в файлах SASS, это вызывает часы и перезапускает styles
задача, которая будет строить full.min.css
,
Вы видите изменения во внешнем интерфейсе, но этот уменьшенный файл становится все больше и больше при каждой перестройке.
Если я опущу исходные карты внутри styles
задача вроде бы нормально работает. full.css
файл всегда в порядке.
Что мне здесь не хватает? Почему минимизированная версия продолжает увеличивать свои размеры?