Gulp SASS, autoprefixer, minify and sourcemaps generate huge file

998 views Asked by At

I'm experiencing strange behaviour using this Gulp configuration to minify my SASS files generating sourcemaps.

'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']);

The first time I run this script using gulp it'll generate a correct full.min.css and it waits for changes in the SASS directory.

When you change something inside SASS files it'll trigger the watch and re-run the styles task, which will build a full.min.css.

You see the changes in the front-end but this minified file becomes bigger and bigger at every rebuild.

If I omit the sourcemaps inside styles task it seems to work fine. The full.css file is always ok.

What am I missing here? Why the minified version keeps increasing its dimension?

0

There are 0 answers