Gulp --watch not updating assets.json after gulp --production

Patabugen · September 4, 2015, 3:46pm

I’ve made a theme and compiled it with gulp --production which creates assets.json.

The front end then includes the CSS/JS files as per assets.json. So far so good.

If I then run gulp watch and make some changes, the CSS files in assets.json are still the ones getting included - so my changes do not get displayed.

To make them show up, I must run gulp --production again.

Is this the expected behaviour and I’m misunderstanding part of the workflow, or is something going wrong?

tyler_morrison · September 11, 2015, 6:40pm

I had a similar issue. I don’t know if this is the ideal answer or not, but you can fix this by deleting your old “dist” folder or simply renaming it.

markorapaic · February 17, 2017, 12:58am

I’m currently having this issue as well - any changes I make while gulp watch is running aren’t shown. Have you come across a fix in the meantime?

kaisermann · February 17, 2017, 2:30am

The asset_path method always checks first if a assets.json file exists. If it does, it returns the cache-busted file path.

github.com

roots/sage/blob/sage-8/lib/assets.php#L54


$directory = dirname($filename) . '/';
$file = basename($filename);
static $manifest;


if (empty($manifest)) {
  $manifest_path = get_template_directory() . '/dist/' . 'assets.json';
  $manifest = new JsonManifest($manifest_path);
}


if (array_key_exists($file, $manifest->get())) {
  return $dist_path . $directory . $manifest->get()[$file];
} else {
  return $dist_path . $directory . $file;
}
}

So, if you’re doing something like:
gulp --production (assets.json is created on dist/)
…
…
…
gulp watch

WordPress will always find the previously built assets.json and use its values as the assets file names.

markorapaic · February 17, 2017, 2:41am

Ahh i see - so whats the best way to get gulp watch to “work” properly again? I’ve pretty much been running gulp && gulp --production && gulp watch as a blanket way of making sure things get compiled, but it’s pretty much tripling the amount of time it takes for me to see changes. Considering what you’ve said it makes sense that gulp --production reliably works.

What is the workflow supposed to be? gulp watch until you’re ready for production?

kaisermann · February 17, 2017, 2:53am

You would do something like:

gulp to clean any existing dist folder and to build all files at least once
gulp watch to watch every file you change
… developing…
… developing…
… developing…
gulp --production to deploy
… a day later…
gulp to clean any existing dist folder and to build all files at least once
gulp watch to watch every file you change
…
…

And so on.

Just remember to do a gulp to clean the dist directory before doing a gulp watch.

markorapaic · February 17, 2017, 3:04am

You sir are a gentleman and a scholar - that works perfectly, thank you for explaining the process!