shri shri - 3 months ago 29
Node.js Question

Change src of script from bower_components to cdn though gulp

I have some scripts tag

<script type="text/javascript" src="bower_components/angular/angular.min.js" cdn="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>

<script type="text/javascript" src="bower_components/angular-messages/angular-messages.min.js" cdn="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-messages.min.js"></script>


which I want to change to

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular-messages.min.js"></script>


I've tried cdnify but we have to code everything in gulp itself.
I want more control from HTML file itself, so it will be easy to control if I am using different cdn urls.

Answer

You can utilize gulp-replace to alter your html files, and use a regex /src="(.+?)"\scdn="(.+?)"/gmi

This should work:

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

gulp.task('replace-cdn', function(){
  gulp.src(['index.html'])
    .pipe(replace(/src="(.+?)"\scdn="(.+?)"/gmi, 'src="$2"'))
    .pipe(gulp.dest('build '));
});
Comments