Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including include-html with all npm packages installed. Try it out:

var includeHtml = require("include-html")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

include-html v1.2.1

include needed files of a html file to a specific folder

include

Packing all needed images, scripts, stylesheets in a html file and save it to a directory.

If you are trying to copy all the files that a html needs to a new directory. You can use include to help you deal with this problem. include is a package, which can pack ONLY the scripts and styles a specific html, here is a following example.

index.html:

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="./style/style.css">
  </head>

  <body>

    <script type="text/javascript" src="./script/script.js">
    </script>
    <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/Base64/0.3.0/base64.min.js"></script>
    <script type="text/javascript" src="./script/script2.js">
    </script>

  </body>

</html>

script/script.js:

(function() {
  console.log('this is a test script');
})();

script/script2.js:

(function() {
  console.log('this is a test script2');
})();

Entering include index.html -o files, include will create a new directory that save all index.html needs. Like script/script.js, and script/script2.js. As a result, the final folder files will bild a file structure like the following source tree.

files ------- index.html
        |---- script ------ script.js
                      |---- script2.js

Prerequisite

  • PhantomJS (http://phantomjs.org/build.html)

Why

The reason building this repository is that if I want to wrapped a html file you need. You can hardly know what the exactly files the html needed, might be some .js, .css files or images, fonts. In the past, you would probably copied the whole images, scripts, stylesheets folder.

include help you find out what is needed in the specific html file, and make a copy to a output folder. This could help you a lot if you are trying to deploy a specific html file.

How it work

The repository create a local server at port 4444 (so you shouldn't use the port), and use phantomjs to request the local server and find out what files the html need.

Install

npm install include-html

Usage

var include = require('../');

include(__dirname + '/html/index.html', __dirname + '/output')

This will copied all the files (images, scripts, styles) that ./html/index.html file needs and copied to ./output

API

###Include('a html file', 'output directory')

  • html file: a html file. (absolute route)
  • output directory: don't worry if the directory is not exist, include will automatically make the folder for you. (absolute route)

CLI usage

Usage: include [options] <source to your html, default ./index.html>

  Options:

    -h, --help                output usage information
    -V, --version             output the version number
    -o, --output <directory>  Path to output directory, defaults to current directory
    -p, --port <port number>  Port which your local server start.

CLI example

include ./test/index.html -o output-test-folder

include will magically packed your js, css, image files, to the output folder that you entered.

License

MIT @chilijung

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free