Hi. I’ve been testing Sage 10 for several months now and I have one problem all the time. When I have some (15) images in resources/images browsersync is very slow. I often have to manually refresh the page to see the changes. I’m doing build:production after each added file, but that doesn’t help. When I move the images to a different location, browsersync works fine again. The problem appears on Windows and Ubuntu. Tested with Laragon, Docker and Valet.
I’m currently using tailwind 2.2.4 in jit mode.
webpack.mix.js
const mix = require('laravel-mix');
require('@tinypixelco/laravel-mix-wp-blocks');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Sage application. By default, we are compiling the Sass file
| for your application, as well as bundling up your JS files.
|
*/
mix
.setPublicPath('./public')
.browserSync({
proxy: 'lightmarlin.test',
port: 32816,
injectChanges: true,
notify: false,
});
mix
.sass('resources/styles/app.scss', 'styles')
.sass('resources/styles/editor.scss', 'styles')
.sass('resources/styles/admin.scss', 'styles')
.options({
processCssUrls: false,
postCss: [require('tailwindcss')],
});
mix
.js('resources/scripts/app.js', 'scripts')
.js('resources/scripts/customizer.js', 'scripts')
.blocks('resources/scripts/editor.js', 'scripts')
// .autoload({ jquery: ['$', 'window.jQuery'] })
.extract();
mix
.copyDirectory('resources/images', 'public/images');
// .copyDirectory('resources/fonts', 'public/fonts');
mix
// .sourceMaps()
.version();
My solution was removing images from being moved to ‘public/images’ since I don’t run any optimizations on them.
To achieve that, I added another asset manifest called images and made it the default. That allows the use of @asset to use the resources/images directory instead of public/images.
Links to styles and scripts were broken because of that, so I had to add theme as the second parameter for style and script assets.
If you kept the theme asset manifest as the default, you can use @asset('image.png', 'images').
I wanted to test your solution, but unfortunately it doesn’t work for me. I left theme as the default value in assets.php. Now the image links are broken.
<?php
use function Roots\public_path;
return [
/*
|--------------------------------------------------------------------------
| Default Assets Manifest
|--------------------------------------------------------------------------
|
| Here you may specify the default asset manifest that should be used.
| The "theme" manifest is recommended as the default as it cedes ultimate
| authority of your application's assets to the theme.
|
*/
'default' => 'theme',
/*
|--------------------------------------------------------------------------
| Assets Manifests
|--------------------------------------------------------------------------
|
| Manifests contain lists of assets that are referenced by static keys that
| point to dynamic locations, such as a cache-busted location. We currently
| support two types of manifest:
|
| assets: key-value pairs to match assets to their revved counterparts
|
| bundles: a series of entrypoints for loading bundles
|
*/
'manifests' => [
'theme' => [
'path' => get_theme_file_path('public'),
'url' => get_theme_file_uri('public'),
'assets' => public_path('mix-manifest.json'),
]
]
];
@theMosaad I’ll try again with a clean theme. My theme has a lot of modifications and I will probably find the reason myself. Your solution is fine for most projects, but I’d like to finally find the cause of my browsersync problems. the worst part is that periodically some themes work fine with pictures. another one worked as I deleted and added images again. It’s hard to find a clue.
Thanks for putting me on the right path @alwaysblank!
@grzesiek1owline for my initial approach to work with the latest version of Sage, I had to create another blade directive @resource which gets resources from the theme/resources directory instead of the theme/public directory.
An example of usage would be @resource('images/firefox.png')
