extract-components
This is a proof-of-concept. some quick and dirty utils for extracting UI components from HTML using CSS selectors.
Install
Install globally with npm:
npm i -g extract-components --save-dev
For a quickstart, try running:
extract "test/fixtures/*.html" .carousel
The results will be saved to examples/carousel
.
This will extract the carousel component from Bootstrap's HTML (found in test/fixtures
).
The results will be saved to examples/carousel
. Open it in the browser to see what this does ;-)
You can also just run node index
to use the defaults. This first searches through Bootstrap's LESS files and parses out CSS classes, then those classes are used to find components so we can extract them from the HTML.
Usage
The CLI is a WIP. It currently takes four arguments:
extract [src] [selector] [dest] [ext]
src
: (-s
|--src
) the filepaths or globbing patterns for the file(s) to parse, e.g.test/fixtures/*.html
selector
: (-c
, for "component" |--selector
) the component selector, e.g. use.carousel
to extract the carousel component.dest
: (-d
|--dest
) (optional, default istemp
): the destination directory for extracted components, e.g.temp
ext
: (-e
|--ext
) (optional, default is.html
): dest extension to use for dest components, e.g..hbs
Author
Jon Schlinkert
License
Copyright (c) 2014 Jon Schlinkert, contributors.
Released under the MIT license
This file was generated by verb-cli on April 17, 2014.