sassminifygulp

gulp minify-css strips out comments in scss files


I am trying to be a good boy and minify my css with gulp. I am currently using gulp-sass (not gulp-ruby-sass) and it does not seem to have inbuilt minifying. So now I am using gulp-minify-css to pipe some minifying into my compiling. The problem is that it now strips out all of my comments. both /*comment*/ and //comment. This is not ideal, as i need the initial comment to setup my wordpress theme.

So I looked in the documentation (https://github.com/jonathanepollack/gulp-minify-css/wiki), and it looks like there is an option for this called keepSpecialComments.

So I have tried the following in my gulpfile:

.pipe(minifycss({keepSpecialComments: '*'}))

and

.pipe(minifycss({keepSpecialComments: *}))

The first one still strips out the comments. the second one reports an error. So I think i might get the formatting wrong?

can anyone help me here?

Thanks


Solution

  • The second example you have there has the asterisk * sitting out in the open — it's not a string. That's why it reports an error.

    The docs state that the default setting is to save all special comments. If you click through to clean-css, you will see that special comments refers to comments that have an exclamation mark (!) to note that they are important. Try changing your comment to look like this, and I bet it will retain it without any configuration at all.

    /*!
    put your settings here
    */
    

    If Wordpress is incapable of working with the special comment, for some reason, then you can use gulp-replace to correct the comment before saving it, like this:

    var replace = require('gulp-replace');
    
    // ... sass, compress-css, etc ...
    .pipe(replace('/*!', '/*'))
    // ... gulp.dest, etc ...
    

    This will remove the exclamation mark from the comment. I wouldn't bother doing this unless Wordpress fails.