Gulp minifyCss and CSS Special Comments


I’m having some issues with Special Comments in CSS and SCSS. I’m new to npm, bower, gulp and so on… so I hope I’m not doing things wrong.
I added normalize.css and animate.css with:

  - bower install --save animate-css
  - bower install --save normalize.css

When I run ‘gulp’ every seems ok. But then I check dist/styles/main.css and animate.css and normalize.css special comments (those that start with /*!) are breaking the resulting CSS.
So I found this: gulp-minify-css - npm
There is a keepSpecialComments: 0 setting to nuke all comments.
I’ve tryng editing gulpfile.js at line 90 from:



  .pipe($.minifyCss({keepSpecialComments: 0 }))

But then I get errors when trying to compile with gulp:

[14:32:23] 'styles' errored after 1.87 s
[14:32:23] Error: Invalid call to lazypipe().pipe(): argument is not a function.
Remember not to call stream creation functions directly! e.g.: pipe(foo), not pipe(foo())
at validateStep (C:\Websites\icaro\\app\themes\icaro\node_modules\lazypipe\index.js:11:10)
at (C:\Websites\icaro\\app\themes\icaro\node_modules\lazypipe\index.js:36:4)
at cssTasks (C:\Websites\icaro\\app\themes\icaro\gulpfile.js:90:8)
at C:\Websites\icaro\\app\themes\icaro\gulpfile.js:149:28
at arrayEach (C:\Websites\icaro\\app\themes\icaro\node_modules\asset-builder\node_modules\lodash\index.js:1342:13)
at Function.<anonymous> (C:\Websites\icaro\\app\themes\icaro\node_modules\asset-builder\node_modules\lodash\index.js:3299:13)
at Manifest.forEachDependency (C:\Websites\icaro\\app\themes\icaro\node_modules\asset-builder\lib\Manifest.js:47:5)
at Gulp.<anonymous> (C:\Websites\icaro\\app\themes\icaro\gulpfile.js:148:12)
at module.exports (C:\Websites\icaro\\app\themes\icaro\node_modules\gulp\node_modules\orchestrator\lib\runTask.js:34:7)
at Gulp.Orchestrator._runTask (C:\Websites\icaro\\app\themes\icaro\node_modules\gulp\node_modules\orchestrator\index.js:273:3)

Normally I’m able to solve this kind of stuff alone with the help of some Google magic… but this I can’t. Hope you can help shed some light on this.

Thanks guys!

It’s because of lazypipe. you need to pass an anonymous function instead which returns minifyCSS:

.pipe(function() {
  return $.minifyCss({keepSpecialComments: 0 });

Note, I haven’t tested this :slight_smile:

1 Like

Thank you very much!
Better read some lazypipe stuff now! haha

I had a similar question about supplying a newLine option to the JS concatenation pipeline. It’s slightly different because the concat pipline is passed a filename argument. But would this be the way to go…?


.pipe($.concat, filename)


.pipe(function(filename) {
      return $.concat(filename, {newLine: ';'});
    }, filename)

@kalenjohnson no this is not right

.pipe($.minifyCss, {keepSpecialComments: 0 })

Is the correct usage. See: like literally the first couple lines of the lazypipe readme and the actual error message lol

Remember not to call stream creation functions directly! e.g.: pipe(foo), not pipe(foo())

The usage is kind of like or

1 Like

This will work:

.pipe($.concat, filename, {newLine: ';'})

Hey, I said I didn’t test it

@emzo @fgilio sorry for the bad info

Everyone shame him

Post must be at least 20 characters

1 Like

Next time be on Discourse before I get here to spread bad info!

1 Like

Even easier. Brilliant, thanks @austin

Hey Austin, thanks for the clarification!

But… I did actually work, is there a side effect of doing it that way?

What kind of error does it throw?

Just tested:

.pipe($.minifyCss, {keepSpecialComments: 0 }


.pipe(function() {
  return $.minifyCss({keepSpecialComments: 0 });

None throws me any error and the resulting main.css is identical.

I think his question was “why should I pass an arguments object over passing an anonymous function”

1 Like