assetsReplace feels broken

[alexgorbatchev]

If I understand the situation with assetsReplace correctly, you have to run it after assets because it needs the manifest... however, the src files that replace is processing aren't picked up from the manifest itself, which means you have to provide the actual file path on disc...

so...

1. if assets has just generated the manifest, there's no easy way to ask assetsReplace to modify the versioned file
2. assetsReplace can modify the source files only, but assets has already copied those over and it's too late...

Am I not using this as intended? Even the example in the README.md is useless, because modifying less files is only possible before packaging and publishing with assets and you shouldn't be having less files in the final build folder.

Thoughts?

[thanpolas]

Right, docs are not pretty clear on that, i need to work on it.

The flow is:

1. You run assets to create the initial Manifest or update an old one
2. You run assetsReplace to create the .less file with the proper values
3. You run less to compile your .less files into a single .css
4. You run assets one more time to fetch and copy the newly build .css file

Here are some gotchas and tips:

For less, step 2, it is advised to only keep your replacement values in one file. E.g. create an assets-replace.less file which will generate the file assets.less which every .less file must include, it would look something like this:

assets-replace.less

//
// ONLY ADD IMAGES TO assets-replace.less
// IMAGES ADDED TO assets.less WILL BE OVERWRITTEN
//

@asset_img_homepage_cover: "__ASSET(/img/homepage-cover.jpg)";
@asset_img_homepage_cover2: "__ASSET(/img/homepage-cover2.jpg)";
@asset_img_pointer: "__ASSET(/img/pointer.png)";
@asset_img_arrow_overlay: "__ASSET(/img/arrow-overlay.png)";

Then run assetsReplace task on that file only and generate the file assets.less. The assets.less file should be tracked in your repository and would look something like this:

assets.less

//
// ONLY ADD IMAGES TO assets-replace.less
// IMAGES ADDED TO assets.less WILL BE OVERWRITTEN
//

@asset_img_homepage_cover: "https://xxx.cloudfront.net/a/img/homepage-cover-9629a621.jpg";
@asset_img_homepage_cover2: "https://xxx.cloudfront.net/a/img/homepage-cover2-fe4ad3bf.jpg";
@asset_img_pointer: "https://xxx.cloudfront.net/a/img/pointer-b251c894.png";
@asset_img_arrow_overlay: "https://xxx.cloudfront.net/a/img/arrow-overlay-083e0c9a.png";

You may need to run the assets task multiple times as you build your website, in a production installation the assets task is run 4 times until all the assets are compiled and compact (less, png optimize, handlebars...)