Replace block/placeholder using Gulp

374 Views Asked by At

I need to replace the following blocks of code while .pipe-ing dev.html to public.html using Gulp

<!-- replaceStart: nameOfBlock-css -->
  <link href="/css/one.css" />
  <link href="/css/two.css" />
  <link href="/css/three.css" />
<!-- replaceEnd-->

<!-- replaceStart: nameOfBlock-js -->
  <link href="/js/one.js"/>
  <link href="/js/two.js/>
<!-- replaceEnd-->

with contents of minifiedCSSLinks.css

<link href="/css/oneTwoThree.min.css" />

and minifiedJSLink.js

<link href="/js/oneTwo.min.js" />

gulp-html-replace, gulp-replace or gulp-string-replace, might do the job, but I don't know how to make them simply grab contents of a file (besides reading the contents of files and passing to a replacement function as a string - I want to believe the modules can do this). Ideally I want something like this in the gulpfile.js:

gulp.src('default.html')
.replace({nameOfBlock-css: 'minifiedCSSLinks.html'})
.replace({nameOfBlock-js: 'minifiedJSLinks.html'})
...

EDIT: The *.min.css|js scripts and styles will be created by concatenation and minification of original *.css|js. The original files are used at dev time, while the minified output will be used in production. Therefore, in the Gulp build process, the of link tags in html files also need to be changed to reflect this and point to the newly created *.min files.

1

There are 1 best solutions below

0
marko-36 On

Ok, so far I'm using gulp-html-replace since it works with <!-- build:<name> --> .. <!-- endbuild: --> blocks. I can't get it to read HTML from files directly (please let me know if I have overlooked this option), so I just pass the file contents as strings:

gulp.src('default.html')
.replace({nameOfBlock-css: fs.readFileSync('minifiedCSSLinks.html', 'utf8')})
.replace({nameOfBlock-js: fs.readFileSync('minifiedJSLinks.html', 'utf8')})
...