If I have multiple script tags in my index.html
<link rel="stylesheet" href="style/style.css" />
<script src="myjs/js.js"></script>
Is it possible to write a gulp task that looks at all html files, and appends "mydir/" to the front of all paths such that the output file (of the same name) i.e. index.html is still index.html.
So when I open the file if I look at the paths, I see
<link rel="stylesheet" href="mydir/style/style.css" />
<script src="mydir/myjs/js.js"></script>
I know there is a gulp-rename, but it looks to only rename files and not contents of files.
Making this the actual answer -
<base href="mydir/">
You don't need gulp to do this for you.
Related
I pushed my project to git, and it was working just fine. However, now that I've cloned it onto a new computer, it's unable to link my html HTML my CSS stylesheet.
Here's the directory(?):
And here's the link throwing the error on the node server:
<link rel="stylesheet" href="/style.css" />
I'm sort of at a loss for what could be going wrong, especially after trying to link it with the path ../public/style.css
Any help appreciated!
I can't get your problem. if the problem is in html file path 3rd option will help you. sorry if this isn't work.
<link type="stylesheet" href="style.css"> - The "style.css" file is located in the same folder as the current page.
<link type="stylesheet" href="public/style.css"> - The "style.css" file is located in the public folder in the current folder.
<link type="stylesheet" href="/public/style.css"> - The "style.css" file is located in the public folder at the root of the current web.
<link type="stylesheet" href="../style.css"> - The "style.css" file is located in the folder one level up from the current folder
Have you tried using the absolute path for testing? Let's try using this method.
<link rel="stylesheet" href="./style.css" />
If your server is making public folder not a part of dockroot, then that might be the case for the error.
My css and Javascript are not showing when I open my file in browser via folder. My files are in the same folder which is a subfolder of subfolders
I have tried renaming files.
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:600,700" rel="stylesheet">
<title>A simple calculator</title>
</head>
<script src="calc.js"></script>
You can use ./ to indicate that the css and js files are in the same directory or to indicate the current directory. This would be relative path for the css and js files.
<html>
<head>
<link rel="stylesheet" type="text/css" href="./style.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:600,700" rel="stylesheet">
<title>A simple calculator</title>
</head>
<body>
<script src="./calc.js"></script>
</body>
</html>
First of all , you want to identify,where those css files and javascript files are located.That means which folders contains particular css files and javascript files. when you integrating css files and javascript files with main html page , set the path to particular css or javascript file from current directory.if particular files are in same level with your current working directory , initialize the path to particular directory.At the same time id you working directory and particular directory are in deferent levels , at first go to particular directory level and initialize the path.(if you want to go previous(back) directory , ' .' can be used.
ex - if you want to go back 1 level './' can be used. if you want to go back two levels of directory '../' can be used.).I hope, you got the idea. cheers !
In order to run uncss to remove unused css rules I need to generate a single page containing all the the css rules used by the angular templates. I think Rendertron might fit this usecase, but was wondering whether it's possible to do the same with the Angular CLI?
For example if we run ng build angular will generate a dist/index.html file with the custom element selectors in the dist/index.html file. However this cannot be targeted with uncss because the template has not been rendered. It is still represented by for example <app-root>, thus uncss cannot see the css rules applied by the <app-root> template.
Yes, by default all the compiled CSS and js files will be generated into dist folder via angular cli.If required, you can configure this using angular-cli.json present in your project. As you can see in below sample of index.html, it contains the path for all the css and JS files. Usually it creates one css file, as it's good to load entire css in one request.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My APP</title>
<base href="/">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="styles.3e523e6b74c68b0940ab.bundle.css" rel="stylesheet" />
</head>
<body>
<app-root></app-root>
<script type="text/javascript" src="inline.5d1afc94d5922f9e85f3.bundle.js"></script>
<script type="text/javascript" src="polyfills.45da1a3263e1321501bf.bundle.js"></script>
<script type="text/javascript" src="scripts.4d46a754e6ffe4a0ff23.bundle.js"></script>
<script type="text/javascript" src="main.cec0d2d86e8c98d02873.bundle.js"></script>
</body>
</html>
You can also instruct cli to separate any vendor specific CSS/js into separate files. Follow the link to know more about configuration.
Since, you would be specifying all your css and js in uncss, so you can go with dist folder content.
I recently downloaded a theme namely (scalia)
it has lots of css but they are present in file with .html extension
every page of this theme open good at local computer [not localhost (i am directly opening index.html in browser)] but when upload it to hosting it shows a mime type error.
Stylesheets are linked in this format
<link rel='stylesheet' id='layerslider-group-css' href="indexf67d.html?f=scalia/wp-content/plugins/LayerSlider/static/css/layerslider.css,scalia/wp-content/plugins/contact-form-7/includes/css/styles.css,scalia/wp-content/plugins/scalia-style-changer/css/ssc-style.css,scalia/wp-content/plugins/mailchimp-for-wp/assets/css/checkbox.min.css,scalia/wp-content/themes/scalia/css/woocommerce.css,scalia/wp-content/themes/scalia/css/woocommerce1.css" type='text/css' media='all'/>
I already got these css file layerslider.css, styles.css, ssc-styles.css etc. etc.
My main question is [is there any alternative of the above code? so that i can replace this code and link my css files manually]
Yes.
If you have a .css file in the same directory than your html file, you can include it that way:
<link rel="stylesheet" type="text/css" href="myfile.css">
If it's in another directory, use relative path or complete path like so
Relative: file inside folders that are in the same directory than the html file
<link rel="stylesheet" type="text/css" href="folder/anotherfolder/myfile.css">
Relative: file that is in the root of the directory containing the html file.
<link rel="stylesheet" type="text/css" href="../myfile.css">
Complete
<link rel="stylesheet" type="text/css" href="C:/Users/yourname/Documents/CSS/myfile.css">
Just visit the link in your href. Save the CSS that you get as a seperate CSS file. Replace the href in the above line with the path to new downloaded file.
My folder structure looks like,
MyProject
|
webcontent
Inside webContent folder I am having my html, js,CSS files.
Here I am loading the js & CSS files directly as below.
<script src="jquery-1.10.2.js"></script>
<script src="jquery-ui.js"></script>
<link rel="stylesheet" href="jquery-ui.css">
But I want to keep the js and CSS file in different folder and I need to call them where I want. But I am not getting where to place the js & CSS file and how to define the path inside html or jsp.
It depends on where they are and how you configure your web server. With a default configuration on nearly all web servers, if you want your scripts in a subdirectory of webcontent, then just add directory-name/ in front of the paths. E.g., for:
MyProject/
|
webcontent/
|
js/
jquery-1.0.2.js
jquery-ui.js
css/
jquery-ui.css
then
<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery-ui.js"></script>
<link rel="stylesheet" href="css/jquery-ui.css">
The search terms for this are "relative URL" and/or "relative path."
Suppose you have your css file in
WebRoot --> Css
folder then use below line in your html
<link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
I hope this helps you
for example, Your HTml file is in one folder and your CSS/js file is in a folder name "mystyle" inside HTML folder. You should address your CSS file LIKE this:
<link rel="stylesheet" href="mystyle/style.css" />
And if your file is in a folder "before" HTML folder, your address your css/js file like this:
<link rel="stylesheet" href="../mystyle/style.css" />