solidify

Comment-based HTML resource processor

npm install solidify
1 downloads in the last day
1 downloads in the last week
12 downloads in the last month

Solidify

NPM version Build status Dependency Status

Comment-based HTML resource processor.

Introduction

Solidify is a cli tool for processing HTML resources by parsing build tags via HTML comments.

It takes html file as the input, and do the following procedures:

  1. Read and parse the html, identify the regions of the css/js references by build tags (see next).

  2. Compress and combine the css/js/html files from each region to one file per region; (it can also embed these resouces files into html inlined).

  3. Copy the images referenced by the css and html to the output folder.

  4. Replace the regions with the links to the minified/combined css/js/html files which predefined in the html.

  5. Save the new html into the output folder.

Build Tag

Build Tag is a kind of specific html comment, used by Solidify to identify the regions to be processed.

The build tags starts with: <!--BUILD:path/to/dist--> and ends with: <!--/BUILD-->, regions lies between the build tags.

Like this:

<!--BUILD:path/to/dist/resources.css-->
...
<!--/BUILD-->

Only css/js references inside the region (the build tags) are processed by Solidify.

If you simply pass INLINE as the output path, Solidify will embed the resources codes into the build region.

Like this:

<!--BUILD:INLINE-->
...
<!--/BUILD-->

There is another build tag named INCLUDE, which will replace the contents inside the INCLUDE tags with the html file content it referenced.

Like this:

<!--INCLUDE:path/to/source/parts.html-->
...
<!--/INCLUDE-->

Installation

npm install -g solidify

Quickstart

  • First, place the build tags to wrap the regions you want to solidify in your html:

index.html:

<!DOCTYPE html>
<html>
    <head>

        <!-- ... -->

        <!--BUILD:css/style.css-->
        <link rel="stylesheet" src="css/style1.css" />
        <link rel="stylesheet" src="css/style2.css" />
        <link rel="stylesheet" src="css/style3.css" />
        <!--/BUILD-->

        <!--BUILD:INLINE-->
        <link rel="stylesheet" src="css/style4.css" />
        <link rel="stylesheet" src="css/style5.css" />
        <!--/BUILD-->

        <!--BUILD:js/script.js-->
        <script src="js/script1.js"></script>
        <script src="js/script2.js"></script>
        <script src="js/script3.js"></script>
        <!--/BUILD-->

        <!--BUILD:INLINE-->
        <script src="js/script4.js"></script>
        <script src="js/script5.js"></script>
        <!--/BUILD-->

    </head>

    <body>

        <!-- ... -->

        <img src="img/image1.png" />

        <img src="img/image2.gif" />

        <!-- ... -->

        <!--INCLUDE:inc/nav.html-->
        <!-- ... -->
        <!--/INCLUDE-->

        <!--INCLUDE:inc/content.html-->
        <!-- ... -->
        <!--/INCLUDE-->

    </body>

</html>

Then run the solidify with the html file in bash:

solidify index.html

If no errors thrown, the result solidified files will placed to the dist dir in current working directory:

css/
    style1.css
    style2.css
    style3.css

img/
    image1.png
    image2.gif
    image3.png  -- no references, ignored

inc/
    nav.html
    content.html

js/
    script1.js
    script2.js
    script3.js

index.html

dist/
    css/
        style.css  -- minified and combined with style1.css + style2.css + style3.css

    img/
        image1.png  -- the same as img/image1.png
        image2.gif  -- the same as img/image2.gif

    js/
        script.js  -- minified and combined with script1.js + script2.js + script3.js

    index.html  -- minified and regions updated with index.html

And the content of index.html will be:

<!DOCTYPE html>
<html>
    <head>

        <!-- ... -->

        <link rel="stylesheet" src="css/style.css" />

        <style type="text/css">
        // CONTENT OF style4.css, style5.css
        </style>

        <script src="js/script.js"></script>

        <script type="text/javascript">
        // CONTENT OF script4.js, script5.js
        </script>

    </head>

    <body>

        <!-- ... -->

        <img src="img/image1.png" />

        <img src="img/image2.gif" />

        <!-- ... -->

        // CONTENT OF nav.html

        // CONTENT OF content.html

    </body>

</html>

Usage

Usage: /lab/bin/solidify input1.html [input2.html ...] [OPTIONS]

Options:
  -e, --encoding     Character encoding of the source files   [default: "UTF-8"]
  -d, --destination  Set the destination output folder         [default: "dist"]
  -t, --tag          Tag for the output css/js urls to prevent caching
                                                                   [default: ""]
  --git              Use git rev for the tag (overrides tag value)
                                                                [default: false]
  --git-abbrev       Set the abbrev length of git rev, 0 for full   [default: 0]
  -s, --size         Maximum bytes of the binary files to be saved as the data
                     URI strings, 0 to off                          [default: 0]
  --html-options     Options for html-minifier, as: key1=value1,key2=value2,...
                     See README for more details                   [default: ""]
  --keep-spaces      Do not strip whitespaces within html       [default: false]
  --weaken-lines     Strip heading and trailing spaces on each html line
                                                                [default: false]
  -q, --quiet        Do not print any messages                  [default: false]
  -h, --help         Show this help message and exit
  -V, --version      Print version number and exit

About --html-options

Options for html-minifier, as: key1=value1,key2=value2,...

Use 0, false, off, no for false value, anything else are treated as true

Options (with default value):

  • removeComments true Remove comments

  • removeCommentsFromCDATA true Remove comments from scripts and styles

  • removeCDATASectionsFromCDATA true Remove CDATA sections

  • collapseWhitespace true Collapse whitespace (the same as --keep-spaces)

  • collapseBooleanAttributes true Collapse boolean attributes

  • removeAttributeQuotes true Remove attribute quotes

  • removeRedundantAttributes true Remove redundant attributes

  • useShortDoctype true Use short doctype

  • removeEmptyAttributes true Remove empty (or blank) attributes

  • removeEmptyElements false Remove empty elements, defaults to false

  • removeOptionalTags false Remove optional tags, defaults to false

For more details please refer to kangax's blog

Limitation

  • Solidify does not support solidifying the inline scripts or styles which pre-coded inside the html, currently.

  • Solidify does not support solidifying the external http css/js references automatically, currently.

License

(The Apache License 2.0)

Copyright (c) 2014, DJ-NotYet dj.notyet@gmail.com

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

npm loves you