Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add option to clean css before template compile #22

Merged
merged 3 commits into from Jul 3, 2019

Conversation

phun-ky
Copy link

@phun-ky phun-ky commented Jun 27, 2019

Greatly reduces size of styles (I shaved over 3 megabytes per page in my use case) :)

This uses clean-css to remove dupes. But sadly, it is a bit slow, and has to be run for every page you make. For my sake, it's doing the same job 4 times, with the same css, since I have 4 pages. But the gains outweighs the pain here, for now

(This is a new PR, the old one (#21 ) was based on an old version of gulp-livingcss)

@phun-ky
Copy link
Author

phun-ky commented Jun 28, 2019

gulp 1,60s user 0,20s system 132% cpu 1,363 total

vs

gulp 45,34s user 0,40s system 104% cpu 43,971 total

This is on ubuntu, which is ordinarily fast :S

@phun-ky
Copy link
Author

phun-ky commented Jun 28, 2019

Updating this pr with only level 1 + dedupe, since that was our main goal, and it's faster:

gulp 6,89s user 0,40s system 115% cpu 6,309 total

@straker
Copy link
Owner

straker commented Jun 30, 2019

Thanks for the the pr. A few questions for my understanding:

  • html-minifier uses clean-css for the minifyCSS parameter, any reason why we don't use that instead?
  • I'v actually been thinking of removing the html-minifier option since it's something that could be done in the next step of a gulp process if you wanted to. Then the user could set all the options. e.g.
gulp.src('styles/**')
  .pipe(livingcss('dest'))
  .pipe(htmlMinifer(options))
  .pipe(gulp.dest('dest'))

Does piping the output of livingcss into clean-css not work?

  • Since the parsedStylesheets are taken from the styles piped into livingcss, could you concat and dedup them before passing them into livingcss? Then you'd only have to do it once no matter how many pages there are

@phun-ky
Copy link
Author

phun-ky commented Jul 2, 2019

Yikes! Did not realize that that was an option! Updated the PR now. If users want to minifyCSS and want to provide their own config, you can do this now :):

  livingcss('bin', {
    template: './template/template.hbs',
    sortOrder: ['introduction', 'foundation', 'guidelines', 'resources'],
    minifyCSS: {
      level: {
        2: {
          all: false, // sets all values to `false`
          removeDuplicateRules: true // turns on removing duplicate rules
        }
      }
    },
    minify: true,

@straker straker merged commit 6080f53 into straker:master Jul 3, 2019
@straker
Copy link
Owner

straker commented Jul 3, 2019

Awesome!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants