I am currently working with gulp-less workflow with livereload feature of chrome and gulp-livereload is working fine.
When I am making any changes to file, livereload refreshes the css and unfortunately it is injecting livereload css instead of less files.
So I have to refresh the page to show the corresponding less file which is very time consuming and made no use of livereload.
It is totally nonsense to use livereload if I anyhow need to refresh the page to see the less sourcemap files?
Let's say I am generating custom.css file from all the less files but when I change into any partial files, livereload generates sourcemaps and updates custom.css as well in the file system but in browser what I see is only injected css.
See the below screenshot to get the exact issue that I am facing.Note that it also appends some version and port number also after injected css. E.g. css/custom.css?livereload=1577164609829 for my case.
What I am expecting to see on refresh is the corresponding less file in browser and not the injected css through the livereload.
Has anyone faced this issue before? If yes then please help me.
Note: Please don't advice using browser sync or any other instead of livereload.
Related
I ran into a caching issue for snap-ui.esm.js file. When we create a build in stencil.js we have to include 2 files on a page, snap-ui.js and snap-ui.esm.js.
The problem is that snap-ui.esm.js file contains links to other files that are loaded dynamically and their names are defined when creating the build. And if we created a new build, snap-ui.esm.js will contain another links already which is correct but browser may cache snap-ui.esm.js with links that don't exist already.
I assume this is not a stencil issue but i faced it during working with stencil.
Please advice how to prevent caching just one js file, in my case it is snap-ui.esm.js
So here's a question. I'm new to Sylius, and am working on some simple CSS updates. I have a local copy of Sylius running with the built-in webserver: server:run. I also have a development server on Digital Ocean, which runs an (almost) identical copy of Sylius, aside from the configs of course.
Something strange is happening with my CSS update, however. I made a change to .navbar-brand within web/assets/compiled/backend_backend_4.css.
This change showed up immediately on my local. On the development server, however, when pulling down the change (git), and verifying that it now exists in that file, the change doesn't seem to propegate. It's effects aren't shown, inspecting the stylesheet doesn't show them, and furthermore viewing the css file sourcecode directly in the browser does not show the change. But on the filesystem it's definitely there.
I've tried clearing the cache, to no avail.
I also checked the assetic value in both config_dev.yml files, and verified they are both set to use_controller: true
Even still, I tried dumping assetic, to no avail.
So I'm wondering what's going on. Additionally, I realize that I probably shouldn't edit CSS files within a folder called 'compiled'. I'm sure there's a way to do that using a compiler, but I'm not yet familiar with the process and am just making minor changes and learning about caching so far.
Yes you are right you shouldn't be editing the compiled files.
You should edit the source files, then run gulp
or on my system i have to explicitly run npm run gulp
I've documented the solution that worked for me here. It didn't involve Gulp at all, but instead uses Assetic:
Assets need to be installed as hard copies first (I'm not quite sure
what this does exactly, but it seems like an important step because
it copies a lot of assets to places. Documentation was unhelpful but
it was suggested on Stack Overflow somewhere.):
app/console assets:install web
Assets should be edited in web/bundles/[bundle-here]/css or js. This
is frequently within syliusweb if it has to do with page styles /
layouts.
Hint: These assets are referred to in files such as
src/Sylius/Bundle/Resources/views/Backend/layout.html.twig (see the
opening:
(% stylesheets
tag, or search universally for this tag).
Within this tag, you'll see that stylesheets have an output to the compiled folder, but also list the
bundles where they pull their original css from. You should edit one of the source css files, if you'd like your changes to end up in the destination css.
After editing assets, dump assetic:
php app/console assetic:dump
Note - it is also possible to set an assetic watcher on these assets
(google to find out how, think it's a -w flag somewhere), but this is
said to only work in development mode, as it should.
After dumping assetic, the assets from the source bundles compile into their assets/compiled versions, usually combining multiple stylesheets. You should now see your asset refresh!
I'm developing a JavaScript/React application in Intellij Idea and I'm using webpack-dev-server to incrementally build my files. That means that the dev server is watching the files and if a file gets changes, webpack rebuilds it. Pretty standard scenario.
Unfortunately, webpack sometimes decides to ignore certain files. I can change them all I want but webpack does nothing. I have not been able to determine any pattern on which files get ignored. It's arbitrary. Sometimes I just create a new file and webpack ignores it.
What is interesting though is that it only happens when I perform the save using Intellij Idea. If I open the file in another editor (for example vim) and save it, the file gets correctly rebuilt. Actually, simple touch file.js is enough to trigger rebuilding.
I guess there is something wrong in how Intellij Idea saves files. Any ideas?
This is due to an IDE feature known as "safe write". When enabled, the IDE will write the changes to a temporary file over the real one. This means webpack's file watching mechanism cannot pick up the changes. Disable this feature to fix the problem. Reference.
For me this did not work, I'm posting this in case anyone has the same scenario. After each save, webpack watch script builds the new bundles and I'm reloading all files from disk (CTRL + ALT + Y). Only after that the changes are visible.
There is an open issue "Background" changes by external tool not being picked up until VFS refresh happens regarding this behavior: file is saved but one has to reload all from disk in order to see the changes (for example in the browser).
I've noticed that when working on a meteor application it will auto refresh the entire page when any stylesheets have changed. Is there a way to make it only refresh the stylesheet assets similar to how LiveReload works?
Also note that I'm using stylus for my stylesheets. Is that what's causing the full reload?
No, out-of-the-box Meteor will reload the entire app when it detects a file change of any type (whether html, css, or js). It doesn't matter if you're using stylus or not.
I imagine future iterations may take a page of out LiveReload for images and css files (so changing them does not cause a refresh), but for the time being the whole site will reload. In fact, this would probably be a fantastic pull request.
The current workaround I found is to use the "regular way" of adding css files:
Put your file myCss.css into the public folder "/public/myCss.css" so that it is not compiled by meteor
Add the following line to your html file:
<link rel="stylesheet" type="text/css" href="/myCss.css" />
Use a live editor such as Espresso or CSSEdit to change the myCss.css file.
Note that once you save the file, meteor will reload anyway. But in the following case:
- You are running meteor in production mode
- Your .css file is not in any folder contained into the meteor project (like you serve the .css file from somewhere else my yourself)
- Your file or folder is starting with a dot "." or ending with tilde "~", in this case, meteor will not reload those files if they did changed. Note that I never have been able to make this work with the ending tilde, moreover working with invisible files (starting with ".") is not very convenient. See here for ref.
I am working with sencha touch 2 in MVC format. I have created a cache.manifest file to bring my app offline.
CACHE MANIFEST
index.html
app.js
guide.css
app/model/Contact.js
app/model/Injury.js
app/view/IncidentForm.js
app/view/Home.js
app/view/DivisionSelect.js
app/view/InjuryResponse.js
app/view/EmergencyContact.js
app/controller/Core.js
i/amcor-app-bg#2.png
i/amcor-bg-logo#2.png
i/amcor-logo.png
i/amcor-tb-logo2x.png
i/arrow_right.png
i/ec-icon#2.png
i/home_icon.png
i/in-icon#2.png
i/ir-icon2x.png
i/ir-icon#2.png
i/ir-toolbar-bg2x.png
st2/builds/sencha-touch-all-compat.js
st2/resources/css/sencha-touch.css
NETWORK:
*
My issue is that the cache.manifest file does not seem to recognize any of my js files except for app.js. When I am working online it seems to cache properly but when I go offline the cache only returns index.html, app.js, and the sencha files. Can the cache.manifest file only have one .js file?
You should really try to use the tools SDK then you don't have to worry at all.
The Microloader helps keep things up to date.
Its a bit light on its error checking output and you must conform to the MVC app layout created by the SDK tools but once its running "it just works".
If the "compile" hangs its probably a missing ref.