gulp-useref: update look up path and the prepend a certain variable before using .restore function

Question

i am trying to use gulp-useref with django. All my inject scripts are working fine, doing manual path update after injecting, but now i want to concat my injected scripts. here is my html

  <!-- build:css({compile/serve,src}) styles/vendor.css -->
  <!-- bower:css -->
  <link rel="stylesheet" href="{{ STATIC_URL }}dash/bower_components/angular-material/angular-material.css" />
  <link rel="stylesheet" href="{{ STATIC_URL }}dash/bower_components/nvd3/src/nv.d3.css" />
  <!-- endbower -->
  <!-- endbuild -->

  <!-- build:css({compile/serve,src}) styles/app.css -->
  <!-- inject:css -->
  <link rel="stylesheet" href="{{ STATIC_URL }}dash/compile/serve/styles/main.css">
  <!-- endinject -->
  <!-- endbuild -->

and

  <!-- build:js(src) scripts/vendor.js -->
  <!-- bower:js -->
  <script src="{{ STATIC_URL }}dash/bower_components/angular/angular.js"></script>
  <script src="{{ STATIC_URL }}dash/bower_components/angular-animate/angular-animate.js"></script>
  <script src="{{ STATIC_URL }}dash/bower_components/angular-cookies/angular-cookies.js"></script>
  <script src="{{ STATIC_URL }}dash/bower_components/angular-touch/angular-touch.js"></script>
  <script src="{{ STATIC_URL }}dash/bower_components/angular-sanitize/angular-sanitize.js"></script>
  <script src="{{ STATIC_URL }}dash/bower_components/angular-resource/angular-resource.js"></script>
  <script src="{{ STATIC_URL }}dash/bower_components/angular-route/angular-route.js"></script>
  <script src="{{ STATIC_URL }}dash/bower_components/angular-aria/angular-aria.js"></script>
  <script src="{{ STATIC_URL }}dash/bower_components/angular-material/angular-material.js"></script>
  <script src="{{ STATIC_URL }}dash/bower_components/angular-messages/angular-messages.js"></script>
  <script src="{{ STATIC_URL }}dash/bower_components/pace/pace.js"></script>
  <script src="{{ STATIC_URL }}dash/bower_components/d3/d3.js"></script>
  <script src="{{ STATIC_URL }}dash/bower_components/nvd3/nv.d3.js"></script>
  <script src="{{ STATIC_URL }}dash/bower_components/angularjs-nvd3-directives/dist/angularjs-nvd3-directives.js"></script>
  <!-- endbower -->
  <!-- endbuild -->

  <!-- build:js({compile/serve,src}) scripts/app.js -->
  <!-- inject:js -->
  <script src="{{ STATIC_URL }}dash/src/js/dashboard/services/api/campaigns.js"></script>
  <script src="{{ STATIC_URL }}dash/src/js/dashboard/controllers/navigation/sidebar.js"></script>
  <script src="{{ STATIC_URL }}dash/src/js/dashboard/controllers/navigation/header.js"></script>
  <script src="{{ STATIC_URL }}dash/src/js/dashboard/controllers/forms/company-settings.js"></script>
  <script src="{{ STATIC_URL }}dash/src/js/dashboard/controllers/forms/campaign-create.js"></script>
  <script src="{{ STATIC_URL }}dash/src/js/dashboard/directives/file-reader.js"></script>
  <script src="{{ STATIC_URL }}dash/src/js/app.js"></script>
  <!-- endinject -->

  <!-- inject:partials -->
  <!-- angular templates will be automatically converted in js and inserted here -->
  <!-- endinject -->
  <!-- endbuild -->

I just want to remove {{ STATIC_URL }}dash from the path, as this is the root where my gulpfile.js resides, (different from index.html directory), process the scripts into respective files and then update my index.html with compiles css and js .. but prepend {{ STATIC_URL }}dash

Answer 1

We had a similar issue recently, and gulp-replace did a wonderful job here. You would use it somehow like this:

gulp.src('path/to/my/index.html')
  .pipe(replace(/{{ STATIC_URL }}dash/g,'withsomethingelse')
  .pipe(/* start the useref stuff now */)

I'm not sure how gulp will behave concerning paths... might be that you have to replace the static URL with something relative to the index.html rather than the gulpfile.