Search code examples
gulpgulp-userefgulp-html-replace

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


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.


Solution

  • 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/")));