qwales1 / gulp-assetpaths Goto Github PK
View Code? Open in Web Editor NEWA Gulp plugin to change asset paths from one environment to another.
License: MIT License
A Gulp plugin to change asset paths from one environment to another.
License: MIT License
Hey guys, so, unfortunately, It doesn't like minified css documents
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.
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.
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.
Need to add regex to test for href and download attributes in the same tag
possibily need to limit templating checks to individual HTML elements
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>
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.