Gulp minifyCss and CSS Special Comments

archived 🗄
1

Hi!

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)

To:

  .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\www.icaro.dev\app\themes\icaro\node_modules\lazypipe\index.js:11:10)
at Function.build.pipe (C:\Websites\icaro\www.icaro.dev\app\themes\icaro\node_modules\lazypipe\index.js:36:4)
at cssTasks (C:\Websites\icaro\www.icaro.dev\app\themes\icaro\gulpfile.js:90:8)
at C:\Websites\icaro\www.icaro.dev\app\themes\icaro\gulpfile.js:149:28
at arrayEach (C:\Websites\icaro\www.icaro.dev\app\themes\icaro\node_modules\asset-builder\node_modules\lodash\index.js:1342:13)
at Function.<anonymous> (C:\Websites\icaro\www.icaro.dev\app\themes\icaro\node_modules\asset-builder\node_modules\lodash\index.js:3299:13)
at Manifest.forEachDependency (C:\Websites\icaro\www.icaro.dev\app\themes\icaro\node_modules\asset-builder\lib\Manifest.js:47:5)
at Gulp.<anonymous> (C:\Websites\icaro\www.icaro.dev\app\themes\icaro\gulpfile.js:148:12)
at module.exports (C:\Websites\icaro\www.icaro.dev\app\themes\icaro\node_modules\gulp\node_modules\orchestrator\lib\runTask.js:34:7)
at Gulp.Orchestrator._runTask (C:\Websites\icaro\www.icaro.dev\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!
FG

2

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
3

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

4

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…?

Original:

.pipe($.concat, filename)

Modified:

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

@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 Function.prototype.call() - JavaScript | MDN or https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply

1 Like
6

This will work:

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

Hey, I said I didn’t test it

@emzo @fgilio sorry for the bad info

8

Everyone shame him

Post must be at least 20 characters

1 Like
9

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

10
1 Like
11

Even easier. Brilliant, thanks @austin

12

Hey Austin, thanks for the clarification!

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

13

What kind of error does it throw?

14

Just tested:

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

And:

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

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

15

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

1 Like