gulp pipe scripts from html block, and set the replacement name for the html-block dynamically

536 views Asked by At

Maybe somebody can point me to the solution.

I have HTML-files with several script tags. I need to

  1. pipe the referenced script files
  2. replace block in html-file with dynamic path

I tried using gulp-useref and it does everything i need but it doesn't allow to change replacement script name dynamically (it has to be stated in html comment)

Another plugin gulp-html-replace completely covers my replacement needs but doesn't pipe referenced scripts at all.

What is a common way to solve this kind of tasks? As it doesn't seem to be a strange one. Thanks in advance.

1

There are 1 answers

0
Michael On BEST ANSWER

Finally just decided to use both of them.

HTML:

<!-- build:js_replace -->
<!-- build:js INTERMEDIATE.js -->
    <script type="text/javascript" src="scripts/script1.js"></script>
    <script type="text/javascript" src="scripts/script2.js"></script>
<!-- endbuild -->
<!-- endbuild -->

And in gulpfile.js:

gulp.src(dirName + '/*.html')
.pipe(useref({}))
.pipe(gif("**/*.js", rename(function (filePath) {
    filePath.basename = "someotherfilename";
})))

// ... Upload to cloud storage

.pipe(gif("**/*.html", htmlreplace({
    js_replace: CLOUD_STORAGE_URL + "/scripts/someotherfilename.js"
})))
.pipe(gif("**/*.html", gulp.dest("./build/")));