I read in a blog you could use gulp-file-include to include .html files, It works but the code below winds up overwriting the include markup in the html...
You might think why don't I have gulp-file-include spit out to another destination folder? Reason being is then I can't get browser-sync to refresh the browser after that. Essentially this link is illustrating my problem...
Looks like there is supposed to be another 'output' folder which will be distilling all the includes into a new .index.html file
I know I could just open up the file which is receiving the includes and then browserSync would work, but isn't that an extra step?
Please ask questions as this seems very inceptionesque!
gulp.task('fileinclude', function() {
gulp.src('builds/development/*.html')
.pipe(fileinclude())
.pipe(gulp.dest('builds/development/'));
});
Turns out I hadn't included the fileinclude in my watch task...
For anyone who wants to check out what I ended up with check out my gist...
https://gist.github.com/antonioOrtiz/2bf2e27b8e0a23115034
Related
I'm trying to auto-refresh my page when I make changes with broswer-sync and gulp.
So far I have it working with my html but I can't seem to figure it out with my css code too.
I have this line of code in my gulpfile.js that works quite well with ONLY html.
gulp.watch("*.html").on("change", reload);
Any help? Thanks! I've also tried putting *.css into the .watch() function and had no luck. I also have a folder with my css in it named "css".
Found the solution!
You cannot see changes with javascript nor CSS. If you want that you'll need to do a live server following https://www.npmjs.com/package/gulp-live-server
EDIT
Go download live server in VSCode, you're welcome...
My problem is that I have a bunch of HTML files but in simple I have public_html/pages folder + index.html/under pages folder a dmca.html is located.
So when I want to locate the file using href = "pages/dmca.html" it doesn't work and on another side when I use "../../public_html/pages/dmca.html" from the beginning it works is it normal or something wrong so I can only use the simple way as I have mentioned above(the link)
You have to look where is the .html file located on the hierarchy. If you are in dmca.html and you have a href on that page to second.html, you will need to jump backwards to the pages directory, and then go to the file: ../second.html
Now, if you are in index.html, and you have a href linking to dmca.html, you will need to hop back one level, enter pages directory, and choose the .html file. So it would be like this: ../pages/dmca.html
-public_html
|
|--index.html
|--pages
|--dmca.html
|--second.html
If I have not explained myself correctly, or I've understood the question wrong, please tell me.
What is happening, if I understand the problem properly, is that you are in index.html, and you want to href dmca.html, but the route you use pages/dmca.html, doesn't work, but if you use ../../public_html/pages/dmca.html, then, it does work. And I guess you are asking why is this happening.
Well, what happens when you use pages/dmca.html is that you are saying: search for a subdirectory called 'pages' and go to the file inside it called dmca.html. This would be correct if you had this hierarchy:
-public_html
|
|--index.html
|--pages
|--dmca.html
|--second.html
But index.html is a file, so it can't contain subdirectories. That's why you have to go one level up the hierarchy, and then, once you are in public_html/ you can choose to load index.html or go to the subdirectory public_html/pages and choose a file from it.
Right now I'm working on my web page, and... rethinking about it, I have to say that you were right, I mean, what you were doing was supposed to work.
Look at my directories. I have a htdocs folder, inside it I have some .png, index.html, and a folder called "prova", inside the folder "prova" I have index2. You can see that it is the same case as yours. I have an href on index.html that says href="prova/index2.html" and it works for me. Actually what I've said to you on the morning is wrong. I'm sorry :/
Because if I write ../prova/inedx2.html what happens is that the folder "htdocs" is removed from the URL. Remaining as: "PortàtilHP_antic_pare/prova/index2.html" You can see that the folder between "PortàtilHP_antic_pare" and "prova", which should be "htdocs", has disappeared.
So now I'm wondering how my answer has been useful for you. I guess I have understand it wrong, and somehow, my answer has made you change something that somehow has worked.
I have been getting this weird problem where, when I upload a new CSS file to the public_html folder in cPanel, it is not updating on the website.
Whats really weird about it was that I uploaded the entire website again. Every html file, every folder, everything. And when I checked the CSS file it was the updated version, but the browser was somehow reading the old one.
To fix this issue I had to change the name of the CSS file (in all of the html files too because without it they were still using the old one even tho it was nowhere in the folder) and re upload the whole website again.
So, am I missing something here? Is this supposed to happen? Or is this actually weird and shouldn't happen at all?
I've also run into this problem. It seems to be a caching issue. Trying this person's trick is how I narrowed it down to being a caching issue:
https://www.sitepoint.com/community/t/css-html-files-updating-on-cpanel-but-not-on-website/271683/5
Smells like cache to me.
If your recent changes are NOT there, then play a trick on the URL by changing the path a little. For example if the path was /themes/mytheme/assets/custom.css or whatever it is, change the version and do something like /themes/mythemes/assets/custom.css?v=1234567
By changing the URL in this way, it would bypass any kind of cache that would be looking for the previous URL. In other words, you should now see your correct CSS file.
I'm using hexo and yilia theme to build my blog,but when I visit my blog,I see some error on chrome console:
I want to change the two js reference to https,but I don't know where I can find the place referencing these files,anyone knows please help me,thanks!
For the mathjax js file, change it in layout/_partial/mathjax.ejs
For the jquery js file : change it in layout/_partial/after-footer.ejs
After that, don't forget to generate the new site with hexo generate
I have a simple static site, with HTML pages in different directories and often run the site locally by opening a file in a browser.
The problem I'm having, is the browser doesn't recognize which folder is the ROOT, so any relative url that points back to the root folder (href="/about.html") won't function.
For example.
I open this in the browser: file:///X:/DOCS/MySite/Directory1/page.html
In this "page.html" I have this link: href="/about.html"
I want the link to point to: file:///X:/DOCS/MySite/about.html
But instead, it points to: file:///about.html
My question is: how do I tell the browser which folder is the ROOT?...or...is there another way to better run my site locally?
Note: Until now, I have been using lots of up-directory ("../") in my linking structure as a work around, but this is complicated and causing other issues, so being able to link based on the root ("/") would be far easier.
You can work around it with jQuery/JavaScript.
$("[href^='root:']").each(function() {
var newRoot = "http://google.com/";
$(this).attr("href", newRoot+$(this).attr("href").substr(5))
return false;
});
This changes all links begining with root: so that with the code above, href="root:index.html" would turn into href="http://google.com/index.html"
However, this would not be applied with any links you are adding to the page later on using JavaScript.
http://jsfiddle.net/ptarun/5rztY/1/