qwales1/gulp-assetpaths

A Gulp plugin to change asset paths from one environment to another.

gulp-assetpaths

Change paths of assets from one environment to another Works for anything included with href, src, or url attributes

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

gulp.task('change-paths', function(){
  return gulp.src(['./*.html'])
    .pipe(assetpaths({
      newDomain: 'www.thenewdomain.com',
      oldDomain : 'www.theolddomain.com',
      docRoot : 'public_html',
      filetypes : ['jpg','jpeg','png','ico','gif','js','css'],
      customAttributes: ['data-custom'],
      templates: true
     }))
     .pipe(gulp.dest('../dist'));
});

options.newDomain - string

the new domain

options.oldDomain - string

the old domain to replace if it was a full path. Anything that doesn't match this domain will be ignored so if you use CDNs for third party code those paths will not be changed.

options.docRoot - string

this will anchor all relative paths to the document root of your project. An example would be in your css file you include url(images/example.png) in a selector. All the directories up to the document root will be prepended to the images/example.png path giving you: url(http://www.thenewdomain.com/css/images/example.png)

options.customAttributes

an array of custom attributes you want to replace the paths of Ex. <img data-custom="/image.png" />

options.templates - boolean (true by default)

If this option is false, only paths to filetypes that are explicitly in the filetypes array will be replaced.

If true, it will attempt to replace paths to static assets in templates. These paths will be changed :

all image tags all css background or background-image properties all script tags tags that have a href attribute with a download attribute in the same tag <a href="<?php echo $myDownloadableThing; ?>" download="foo">

options.filetypes

Array of filetypes to change the path for.

Use

I used this to convert websites to start serving their static assets from a CDN.

NOTE: This plugin assumes that any paths in a database or other other data sources are relative to the root directory if you are using server side or client side templating. Full paths in the database will give you the wrong path.

/assets/images/image.png - OK

http://www.oldDomain.com/assets/images/image.png - FAIL

assets/images/image.png - FAIL

Again that is only for dynamically generated paths. All of those examples in code will be replaced correctly.

gulp-assetpaths's Issues

href's to downloadable files in templates not being replaced

Need to add regex to test for href and download attributes in the same tag

Match elements spanning multiple lines

Add support for paths in JSON files

Handle live internet image sources

Use something like node-image-scraper to get the image as a vinyl pipe, store it somewhere (images/approximate-title.jpg) and inject it into the build html / css.

Support streams

Templating - Img tag requires src attribute to be first

Supporting templates overrides the filetype array

@font-face

src attributes are being replaced without img or script tag being present

Doesn't do well with minified css, especially cssnano

Hey guys, so, unfortunately, It doesn't like minified css documents

customAttributes: srcset path replacement works on first entry only

With an image such as
<img data-widths="[56,112]" data-sizes="auto" data-srcset="/asset/img/dummy_avatar_56.jpg 56w, /asset/img/dummy_avatar.jpg 112w" class="lazyload avatar__img" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="/>

only the first path is replaced although srcset (here as data-srcset being polyfilled) is usually a list of paths, so this returns
<img data-widths="[56,112]" data-sizes="auto" data-srcset="//dummy.com/asset/img/dummy_avatar_56.jpg 56w, /asset/img/dummy_avatar.jpg 112w" class="lazyload avatar__img" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="/>

doesn't work in native srcset either which I'd expect to be handled as a default attribute to look at.

Can cause unexpected behavior when uglify is run before assetpaths

possibily need to limit templating checks to individual HTML elements

Feature Request: path replacement in custom data attributes

I often use lazy loading or other techniques that use data attributes to image paths; it'd be cool if an option would be to pass these attributes as an object or array that your plugin will replace paths inside of.

templates set false but replace with url,but I don't want to be replaced.

The demo is below:
angularjs ng-src I don't want to be replace but the second gift.award_img_url has been to be replaced.

<div class="ui-col-tab"> <span class="company-logo"> <img ng-src="{{companyInfo.corp_sqare_log_url}}"> <img ng-src="{{gift.award_img_url}}" class="gift-img mr10 ml10"> </span> <span class="company-name">{{companyInfo.corp_name}}</span> </div>