How to use presets Gupl-cssnano (newbie question)?


Just started to learn Gupl and faced with the need:
  • to minifirewall the final CSS file.
  • delete (merge) it duplicates
  • to register vendorname prefixes for css properties (it is clear what is responsible for this Gulp-Autoprefixer)
  • to remove the comments
  • well, everything else (to not much paint) that is necessary for normal end CSS file...

I rummaged through a pile of information in the Internet, met with such plugins as: 'gulp-clean-css, gulp-csso, gulp-css-purge and of course myself gulp-cssnano...

Opted at the last - gulp-cssnano because he's got a lot of presets.

But! How to use them at the office. the website I found (as well as in the Internet), except for one discardOverridden: {removeAll: false}...

Tried by analogy:
 autoprefixer: {browsers: supported, add: true, cascade: false, grid: true}, //works. The rest - no
 discardOverridden: {removeAll: false},
 cssDeclarationSorter: {order: 'smacss'},
 //discardComments: {removeAll: false},
 discardComments: false,
 cssDeclarationSorter: false,
 mergeIdents: true

but cssnano:
  1. remove all @media - (discardOverridden)
  2. not sorts - (cssDeclarationSorter)
  3. if I have several different classes with the same styles, for example:

    .popover-title, .popover-content{
     font-family: Verdana, Geneva, Arial, Helvetica, sans-serif


    body, label, select, input[type=text], textarea{
     font-family: Verdana, Geneva, Arial, Helvetica, sans-serif

    cssnano that unites them together... like so:

    body, label, select, input[type=text], textarea, .popover-title, .popover-content{
     font-family: Verdana, Geneva, Arial, Helvetica, sans-serif

One word: plz tell me how to change (if possible with examples)?

Unfortunately, English is sooooo bad I know, but from what I could read, I have a sneaking idea that cssnano need to use with gulp-postcss... or not necessarily?

In advance I thank for answers!
March 11th 20 at 19:14
1 answer
March 11th 20 at 19:16
CSSnano runs ten times slower and other settings is not the best choice. Use CSSO or gulp-clean-css with the default settings, it will be enough if you don't want to dig into the settings.
Well, speed me (in this project) is not worried. willing to wait - muhammad commented on March 11th 20 at 19:19

Find more questions by tags Gulp.js