1.0.6 • Published 8 years ago
front-end-dependency-inject v1.0.6
front-end-dependency-inject
CLI tool for injecting CSS and JavaScript references into an html file
Usage
front-end-dependency-inject <name> <type> <input html file> <output html file> <glob cwd> <glob patterns>...Types:
- JS
- CSS
Example
Imagine we have the following file structure:
|--- webroot
|--- index.html
|
|--- js
| |
| |--- app.js
| |
| |--- vendor.js
|
|---css
|
|--- app.css
|
|--- vendor.cssHere is what index.html looks like:
<!DOCTYPE html>
<html>
<head>
<!-- inject:css:vendor -->
<!-- inject:css:app -->
</head>
<body>
<!-- inject:js:vendor -->
<!-- inject:js:app -->
</body>
</html>Let's inject the js dependency references. Run the following from command line:
front-end-dependency-inject vendor js webroot/index.html webroot/index.html webroot js/vendor.js
front-end-dependeny-inject app js webroot/index.html webroot/index.html webroot js/app.jsindex.html will now include the script tags for its JavaScript dependencies.
<!DOCTYPE html>
<html>
<head>
<!-- inject:css -->
</head>
<body>
<script src="js/vendor.js"></script>
<script src="js/app.js"></script>
</body>
</html>Now let's inject the css dependency references. Run the following from command line:
front-end-dependency-inject vendor css webroot/index.html webroot/index.html webroot css/vendor.css
front-end-dependency-inject app css webroot/index.html webroot/index.html webroot css/app.cssindex.html will now include the link tags for its css dependencies.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/vendor.css" />
<link rel="stylesheet" type="text/css" href="css/app.css" />
</head>
<body>
<script src="js/vendor.js"></script>
<script src="js/app.js"></script>
</body>
</html>