gulp-build-html
v1.0.17
Published
Used to process html files to automatically concat css and js files, and meanwhile update html references.
Downloads
6
Maintainers
Readme
Used to process html files to automatically concat css and js files, and meanwhile update html references.
Usage
This plugin works similarly as gulp-useref but supports inline scripts.
Style1
<!-- build:css ../css/index.html.allinone.css -->
<link rel = "stylesheet" href = "../css/view1/a.css"/>
<link rel = "stylesheet" href = "../css/view1/b.css"/>
<!-- endbuild -->
<!-- build:js index.html.allinone.js -->
<script type = "text/javascript" src = "../js/view1/a.js"></script>
<script type = "text/javascript" src = "../js/view1/b.js"></script>
<script type = "text/javascript">
alert("hello, world")
</script>
<script type = "text/javascript" src = "../js/view2/c.js"></script>
<!-- endbuild -->
Style2
<slot for="merge-reference-content"
fileType="css"
outputLocation="file"
outputFilePath="../css/${fileBaseName}.allinone.css"
>
<link rel = "stylesheet" href = "../css/view1/a.css"/>
<link rel = "stylesheet" href = "../css/view1/b.css"/>
</slot>
<slot for="merge-reference-content"
fileType="js"
outputLocation="inline"
>
<script type = "text/javascript" src = "../js/view1/a.js"></script>
<script type = "text/javascript" src = "../js/view1/b.js"></script>
<script type = "text/javascript">
alert("hello, world")
</script>
<script type = "text/javascript" src = "../js/view2/c.js"></script>
</slot>
Note
- For css build blocks, the css reference style should be like "<link rel = "stylesheet" href = "[href]"/>", or else the associated file would not be built in.
Style2 Options
fileType
- Target file type. Currently onlycss
andjs
are supported.outputLocation
- Where the concated file content should output.Supported enum values arefile
(which requires optionoutputFilePath
) andinline
. Valueinline
will output the concated content inside the html file.Currently no more actions such as uglify or minimization is supported. You may specifyoutputLocation
tofile
and then use plugingulp-resolve-import
to import after uglifying or minimizing the content.Note that when building css, asset references in the source css file will be automatically adjusted to the output location.outputFilePath
- Which file to create or override to output the concated reference content. Relative (to the html file) path is supported.
License
MIT