gulp minify-css strips out comments in scss files

Question

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

Answer 1

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 to 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.