browser-sync | Keep multiple browsers & devices in sync when building | Frontend Framework library

If your CSS seems to be rebuilding in an infinite loop, there’s a good chance it’s because your build tool doesn’t support the glob option when registering PostCSS dependencies.

Many build tools (such as webpack) don’t support this option, and as a result we can only tell them to watch specific files or entire directories. We can’t tell webpack to only watch *.html files in a directory for example.

That means that if building your CSS causes any files in those directories to change, a rebuild will be triggered, even if the changed file doesn’t match the extension in your glob.

And here's their recommendation:

To solve this problem, use more specific paths in your content config, making sure to only include directories that won’t change when your CSS builds:

src/**/*.+(scss|sass) note the + sign before the alternation.

But in your styleLink variable you have:

You are not able to see anything because your script tries to get the canvas element, which does yet exist at that time. By moving your script to the end, you are ensuring that your page has rendered before your script is ran.

Using WordPress you can do:

When creating tasks via the gulp.task(...) form you do need to have those tasks created (so they can be registered) prior to their being called. Otherwise you will forward-referencing them.

Forward references

A forward reference is when you compose tasks, using string references, that haven't been registered yet. This was a common practice in older versions, but this feature was removed to achieve faster task runtime and promote the use of named functions.

In newer versions, you'll get an error, with the message "Task never defined", if you try to use forward references.

• from Forward reference documentation

One advantage of the function myGulpTask() {...} form of creating tasks is that do not need to be declared prior to calling them.

To support Node.js 16, upgrade gulp-sass: the latest version today is 5.1.0: