parse html recursively in folder

[guillaumevincent]

hi,
I have 62 templates in folders and subfolders
How can I specify to uncss to read all the html in a specific folder ?

this work:

gulp.task('uncss', function() {
    gulp.src('static/css/vendor/bootstrap.min.css')
        .pipe(uncss({
            html: ['templates/404.html','templates/contact/contact.html','templates/base.html' ]
        }))
        .pipe(gulp.dest('static/css'));
});

with a regex it doesn't:

gulp.task('uncss', function() {
    gulp.src('static/css/vendor/bootstrap.min.css')
        .pipe(uncss({
            html: ['templates/*.html', 'templates/*/*.html']
        }))
        .pipe(gulp.dest('static/css'));
});

Any idea ?

[ben-eb]

The html option is passed straight through to UnCSS; I agree that this is a good feature, but you would be better off submitting it to the UnCSS issue tracker; that way other plugins that consume UnCSS (such as grunt-uncss), and UnCSS itself can benefit.

This plugin is just a streamy wrapper around the UnCSS module.

[guillaumevincent]

thank you ben-ed, I've submit a new feature > uncss/uncss#51

[giakki]

Thanks for the suggestion, but it's probably better to implement at plugin-level. Doesn't gulp have a way to preprocess "star-paths" like grunt?

[ben-eb]

Sure, both systems use minimatch. I suggested that this is probably better at the module level because then the other libraries that consume UnCSS can benefit and not just my wrapper; as of this writing:

• broccoli-uncss
• gulp-uncss
• gulp-uncss-task
• grunt-uncss
• mimosa-uncss
• uncss-brunch

Plus we don't know if there will be some other task in the future that will want this functionality.

[ben-eb]

See also: uncss/grunt-uncss#64

[giakki]

Wow, I didn't even imagine there were so many wrapper for uncss!
In that case, I'll get working on it, since it looks like it is a much requested feature and it is causing many headaches. 👍

[p-j]

In the mean time, you can use glob.sync() which do exactly what you need here : take a glob pattern and turn it in an array of matched files.
It might also interest @giakki for the implementation upstream.

$ npm install glob --save-dev

var glob = require('glob');

gulp.task('uncss', function() {
    gulp.src('static/css/vendor/bootstrap.min.css')
        .pipe(uncss({
            html: glob.sync('templates/**/*.html')
        }))
        .pipe(gulp.dest('static/css'));
});

And if you need to glob multiple patterns, you can use lodash or underscore flatten to turn it in a single flat array of files.

Edit: I have here the very setup I'm talking about.

[jrdnbwmn]

@p-j That's awesome, thanks!

[drainpip]

@p-j just swinging by to thank you for the idea - works great :)

[p-j]

Happy to help :)

@ben-eb I've seen you refer to my comment on several occasion, maybe adding a corresponding example in the readme could clear things up ?

[ben-eb]

@p-j 👍