Replace CSS url with Gulp task

Question

I try to replace the path of a CSS file in index.html using Gulp. The problem is I have multiple projects with different theme name, and the path of the source file is different in the distribution package

index.html

<link href="app/style/themes/dark/theme.css" id="hmi-theme" rel="stylesheet" />

In my distribution package, the theme is copied under something like src\projects\project\app\style\themes

dist/index.html

<link href="[set the path here/]app/style/themes/dark/theme.css" id="hmi-theme" rel="stylesheet" />

Here is an attempt with gulp-find to find the url in index.html:

var gulp = require('gulp');
var find = require('gulp-find');
var replace = require('gulp-replace');

gulp.task('templates', function(){
    gulp.src(['index.html'])
        .pipe(find(/app\/style\/themes\/([^"]*)/g))
        .pipe(gulp.dest('file.txt'));

That works, I've got the value in the destination file. But is it possible to use this value with gulp-replace to change the value in the HTML file?

I've tried also something like:

.pipe(replace(/app\/style\/themes\/([^"]*)/g, "dist/" + find(/app\/style\/themes\/([^"]*)/g)))

But the value in index.html was:

dist/[object Object]

Jonathan Anctil · Accepted Answer · 2017-02-10 19:22:41Z

3

Ok, I've finally found a solution:

return gulp.src(path.join(projectDir, 'index.html'))
  .pipe(replace(/app\/style\/themes\/([^"]*)/g, function(cssPath) {
      return "my-new-path/" + cssPath;
  } ))
  .pipe(gulp.dest(distDir));

answered Feb 10, 2017 at 19:22

Jonathan Anctil

1,0574 gold badges23 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Replace CSS url with Gulp task

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related