1

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?

Matteo Guarnerio
  • 720
  • 2
  • 9
  • 26
  • Help me out there... why do you concatenate your `full.css` file with your new sass output? – ddprrt May 27 '15 at 14:39
  • Ok, this is not my intention, and it could be another error here. I only want to get `full.css` via concatenation of SASS compiled files (CSS) and `full.min.css` which is the minified version with sourcemaps. Which is the best way to achieve this? – Matteo Guarnerio May 27 '15 at 15:06
  • So you mean to get the name of that file? Or do you want to get the contents. For the first one, you just can use the `rename` task. It would make sense that your files grow bigger that way, because MinifyCSS actually removes duplicates, but the sourcemaps still need to know where all came from. – ddprrt May 27 '15 at 16:00
  • File naming is correct, I get 2 files with contents according to their names. The problem is the content growing on each build in the `full.min.css`. Now I see your point, for me is ok also to get the `full.css` as concatenation and sourcemaps (useful for debugging SASS), and get the `full.min.css` minified without sourcemaps. – Matteo Guarnerio May 27 '15 at 16:07
  • Sorry that I kept you waiting. Could you perhaps put your sourcemap to a pastebin.com? I'd like to look at what's getting merged. I've the feeling that you have some sort of loop here, concatenating the same file over and over, with minifycss removing it again. – ddprrt Jun 07 '15 at 19:14
  • Here the output, [full.css](http://pastebin.com/LnZjBjiA) and [full.min.css](http://pastebin.com/U89nC2AJ) with source map. I've also rewritten it using `gulp-sass`, here the [PoC](http://pastebin.com/5cbD9hxy). – Matteo Guarnerio Jun 08 '15 at 08:04
  • There's one thing missing in your current Gulpfile from the one stated in the question... that's the `concat` part which merges the file with itself -- maybe your file doesn't grow anymore. :) To me the current version looks really good – ddprrt Jun 11 '15 at 13:14

0 Answers0