How to setup the configuration?

Samirbekaert commented 9 years ago

hi, thanks for this brunch plugin.

can't seem to get it running however. Disclaimer: I never used uncss before in any setting (grunt,...).

my site structure is as follows (including the built directory public):

root/  
|-app/
|--assets/   
|---index.html   
|---landing-01.html   
|--styles/
|---style.less
|-public/
|--index.html
|--landing-01.html
|--stylesheets/   
|---style.css
|-vendor/
|--styles/
|---bootstrap.css
|---icon-font.css

Assuming uncss-brunch runs solely on the command brunch build -production, how should I configure the plugin when: I use LESS my distribution directory is /public my final compiled/built CSS file is located in /public/stylesheets my brunch setup concatenates css files from the vendor/ folder with my main compiled style.less file

I'm trying this configuration, but it doesnt work.

plugins:
    uncss:
        options:
            csspath: 'stylesheets'
            htmlroot: 'public'
        files: ['index.html', 'landing-01.html']

perhaps I'm getting the mechanics of the plugin wrong?

jakubburkiewicz commented 9 years ago

Hi, I had the same problems at the beginning :)

In your case, if you have CSS files linked to HTML files by "link" element, uncss should know where he find the CSS to process - removing an 'csspath' property from config should help.

Samirbekaert commented 9 years ago

Thanks for your answer. I removed csspathfrom the config but I still get the same error when I run brunch build --production:

error: UnCSS: no stylesheets found

Where is it looking exactly? In the public (build) folder and its subdirectories? It's actually strange because when the error throws the build process stops and the /stylesheetsfolder is the only folder that is missing from the build directory.

The uncss plugin is the last one in my package.json so I assumed the plugin doesnt interfere with my css building. It's a mystery to me why it actually does.

  "dependencies": {
    "auto-reload-brunch": ">= 1.0 < 1.8",
    "clean-css-brunch": ">= 1.0 < 1.8",
    "css-brunch": ">= 1.0 < 1.8",
    "javascript-brunch": ">= 1.0 < 1.8",
    "less-brunch": "^1.7.2",
    "uglify-js-brunch": ">= 1.0 < 1.8",
    "uncss-brunch": "^1.0.1"
  }

jakubburkiewicz commented 9 years ago

OK. How it's look in my projects.

I have "three steps" directories structure:

/root
--development/
--build/
--release/

In 'development' dir I write the code (CoffeeScript, SASS, etc.). Brunch is 'watching' (brunch w) on 'development' and moving processed code to the 'build' directory. When I run brunch build -P, code is processed by plugins, optimisers... - now I have code in 'release' dir.

In above, 'htmlroot' is set on an 'build' directory.

Samirbekaert commented 9 years ago

ah so you have 2 separate distribution directories: /buildand /release. This indeed seems logical for allowing the uncss plugin to work from finished/compiled stylesheets.

Can I see your brunch config file so I can mimic that setup? In any case, this already is an unconventional setup so we should definitely consider adding it to the readme later.

Samirbekaert commented 9 years ago

@jakubburkiewicz would be a great help. Really want to get this working. thx

1951FDG commented 9 years ago

@Samirbekaert I figured it out!

I suggest you add the sample code below to your brunch config file.

  overrides:
    release:
      paths:
        public: 'release'
      sourceMaps: false
      plugins:
        on: ['uncss-brunch']
        uncss:
          options:
            ignore: [/\.\bactive\b/]
            ignoreSheets: [/fonts.googleapis/]
          files: ['public/index.html']

You can invoke the release build with command:

brunch build -e release

Basic workflow:

brunch build -P
brunch build -e release

Optional settings:

ignore: sample regex to ignore '.active' class ignoreSheets: sample regex to ignore Google fonts

You may need to ignore all other CSS files linked to 'public/index.html' by "link" element other than '/stylesheets/style.css'. Alternatively, you can add "stylesheets" key to uncss options, to avoid having to add "ignoreSheets".

stylesheets: ['/stylesheets/style.css']

Drawbacks

Seems as if uncss-brunch is not compatible with projects with multiple CSS files at the end of brunch build -P, since it overwrites all CSS files. Works fine if only one compiled CSS file is present.

P.S. csspath and htmlroot seem to be unnecessary.

Example of @jakubburkiewicz three steps" directories structure: https://github.com/jakubburkiewicz/brunch-scab

jakubburkiewicz / uncss-brunch