Renata Renata - 4 months ago 11
CSS Question

references to css and javascript from html don't work only on localhost

I am automatically inserting references to css and js files into html head with help of grunt-link-html plugin, but when viewing the page on http://localhost:9000/ files are not found ('Cannot GET'). The styles and scripts are referenced relatively and are showing when viewing the file by double-clicking from harddrive:

<!-- begin:css -->
<link rel="stylesheet" type="text/css" href="../deploy/css/myproject.min.css">
<!-- end:css -->

<!-- begin:js -->
<script src="../deploy/js/myproject.min.js"></script>
<!-- end:js -->


I'm new to Grunt, what am I missing? Thanks for any help

project structure:

MyProject
_build
node_modules
Gruntfile.js
package.json
deploy
css
myproject.min.css
js
myproject.min.js
src
css
myproject.css
js
myproject.js

index.html


extracts from the gruntfile:

express: {
all: {
options: {
port: 9000,
hostname: "0.0.0.0",
bases: ['C:/Users/user1/MyProject/src']
}
}
},
open: {
all: {
path: 'http://localhost:<%= express.all.options.port%>',
app: 'C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe'
}
},
link_html: {
your_target: {
jsFiles: ['../deploy/js/portfolio.min.js'],
cssFiles: ['../deploy/css/portfolio.min.css'],
targetHtml: ['../src/index.html'],
options: {
cwd: '../deploy'
}
}
}

grunt.registerTask('server', ['connect', 'express', 'open', 'watch']);

Answer

The .. at the beginning of the CSS & JS file paths are correct for Grunt if run from _build subdir, but not for the page, because index.html is at the project root directory.

I would move the Grunt stuff from _build to project's root folder and remove the .. from Gruntfile.js, too.

After a Grunt rerun it should work, then.

Comments