Comments (6)
@fisharebest, for those cases what you need is an assets filter/preprocessor. The library doesn't include a built in one but it offers a way to provide your custom one.
Simply use a closure in your fetch_command
config option to process your assets before the get pipelined. Take a look at #23 for more details. Following that example you only need to add url replacing logic to the process()
function.
I didn't know about the prependRelativePath
option. To be honest, I'm using the CSS minifier with default options. I'm going to research more and see if I can make something to, somehow, pass options from the config file to the minification libraries.
from assets.
As a quick-and-dirty proof of concept, I have this, which works.
self::$asset_manager = new \Stolz\Assets\Manager(array(
'css_dir' => '.',
'js_dir' => '.',
'pipeline' => is_writable(WT_ROOT . 'asset-pipeline'),
'pipeline_dir' => 'asset-pipeline',
'pipeline_gzip' => 9,
'public_dir' => WT_ROOT,
'fetch_command' => function ($asset) {
$unprocessed = file_get_contents($asset);
$prefix = str_replace(WT_ROOT . '/', '.', dirname($asset)) . '/';
$processed = str_replace('url(', 'url(' . $prefix, $unprocessed);
return $processed;
},
));
Obviously, I'll need a more sophisticated processor, to rewrite only local files (not data: urls, etc.), but that should be straightforward.
Thanks!
from assets.
This is my fetch command for Laravel:
'fetch_command' => function ($asset) {
$unprocessed = file_get_contents($asset);
$prefix = str_replace(public_path() . '/', '/', dirname($asset)) . '/';
$unprocessed = preg_replace("/\burl\('([^']+)'\)/", "url($1)", $unprocessed);
$processed = str_replace('url(', 'url(' . $prefix, $unprocessed);
return $processed;
},
I have added this additional line:
$unprocessed = preg_replace("/\burl\('([^']+)'\)/", "url($1)", $unprocessed);
font-awesome.css has urls like:
src: url('../fonts/fontawesome-webfont.eot?v=4.1.0')
In this case the above mentioned won't work
from assets.
According to http://www.w3.org/TR/CSS2/syndata.html#value-def-uri:
The format of a URI value is 'url('
followed by optional white space
followed by an optional single quote (') or double quote (") character
followed by the URI itself,
followed by an optional single quote (') or double quote (") character
followed by optional white space
followed by ')'.
A non greedy PHP regex to match that specification could be '~url\(\s?[\'"]?(.*?)[\'"]?\s?\)~'
(not tested).
So here is a possible approach to rewrite relative CSS URLs:
'fetch_command' => function ($asset) {
$content = file_get_contents($asset);
$regex = '~url\(\s?[\'"]?(.*?)[\'"]?\s?\)~';
$filter = function ($match) {
// Do not process absolute URLs
if('http://' === substr($match[1], 0, 7) or 'https://' === substr($match[1], 0, 8) or '//' === substr($match[1], 0, 2))
return $match[0];
// Add your filter logic here
return 'url("../'. $match[1] . '")';
};
// Apply filter
return preg_replace_callback($regex, $filter, $content);
},
from assets.
I am not well versed with regex but I have faced some problems with yours (which I was facing with mine too):
I had to change my regex to:
$regex = "/\burl\(\s?[\'\"]?(([^';]+)\.(jpg|eot|jpg|jpeg|gif|png|ttf|woff|svg).*?)[\'\"]?\s?\)/";
This included all the rules you have covered and adds more conditions that the resource is an image or a font file. This way I won't touch urls which don't need any fixing. For example url('data:image/png..')
and some other in javascript files like: behavior:url(#default#VML)
Thanks for your input, right now my fetch_command is:
'fetch_command' => function ($asset) {
$content = file_get_contents($asset);
$prefix = str_replace(public_path() . '/', '', dirname($asset)) . '/';
$regex = "/\burl\(\s?[\'\"]?(([^';]+)\.(jpg|eot|jpg|jpeg|gif|png|ttf|woff|svg).*?)[\'\"]?\s?\)/";
$filter = function ($match) use ($prefix) {
// Do not process absolute URLs
if('http://' === substr($match[1], 0, 7) or 'https://' === substr($match[1], 0, 8) or '//' === substr($match[1], 0, 2))
{
return $match[0];
}
// Add your filter logic here
return 'url(\''. $prefix.$match[1] . '\')';
};
// Apply filter
return preg_replace_callback($regex, $filter, $content);
},
from assets.
I used Assetic to do the rewrite stuff. This way I don't have to mess around with RegEx and can rely on battle-tested solutions. Anyway I'm sure the following snippet can be improved:
'fetch_command' => function ($asset) {
$content = file_get_contents($asset);
$info = pathinfo($asset);
$sourceRoot = 'assets/'. $info['extension'];
$sourcePath = $info['extension'] . DIRECTORY_SEPARATOR . $info['basename'];
$rewrite = new Assetic\Filter\CssRewriteFilter();
$assetic = new Assetic\Asset\StringAsset($content, [$rewrite], $sourceRoot, $sourcePath);
$assetic->setTargetPath('assets/min');
return $assetic->dump();
},
from assets.
Related Issues (20)
- How it pipeline multiple assets, how determines the sorting ? HOT 2
- Update mrclay/minify version ? HOT 4
- [Newbie] How to use it with naked php ? HOT 1
- warning: preg_match(): Passing null to parameter #2 ($subject) of type string is deprecated HOT 1
- would love a config flag to never pipeline external (ex: cdn) assets HOT 5
- 'php artisan asset:flush' doesn't support multitenancy feature HOT 1
- Class stolz.assets.group.default does not exist HOT 2
- Additional issue in last version 0.1.7 on Laravel 4 HOT 1
- Minified files doesn't change images relative path HOT 1
- Command to Compile Assets HOT 4
- Resource Integrity HOT 4
- Twig Integrity HOT 2
- Why don't use full URLs intead of relatives? HOT 5
- Laravel Help HOT 1
- <style id="myid" HOT 1
- S3 Support HOT 1
- Loading Gzipped version css/js in the document HOT 2
- Load all assets from a directory HOT 3
- Position in collection HOT 5
- files and URL's with special characters won't load HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from assets.