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
25
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