Jean-CS Jean-CS - 3 months ago 17
HTML Question

Gulp not adding correct css/js paths to index.html

Bootstrap loads correctly but not the custom

styles.css


Notice the
'../public'
in Bootstrap and jQuery files, but not on
styles.css


Here's
index.html


<head>
<!--bower:css-->
<link rel="stylesheet" href="../public/lib/bootstrap/dist/css/bootstrap.css" />
<!--endbower-->
<!--bower:js-->
<script src="../public/lib/jquery/dist/jquery.js"></script>
<script src="../public/lib/bootstrap/dist/js/bootstrap.js"></script>
<!--endbower-->
<!-- inject:css -->
<link rel="stylesheet" href="/public/css/styles.css">
<!-- endinject -->
<!-- inject:js -->
<script src="/public/js/app.js"></script>
<!-- endinject -->
</head>


Here's
gulpfile.js


var gulp = require('gulp');

gulp.task('inject', function () {
var wiredep = require('wiredep').stream;
var inject = require('gulp-inject');

var injectSrc = gulp.src(
['./public/css/*.css', './public/js/*.js'],
{ read: false }
);

var options = {
bowerJson: require('./bower.json'),
directory: './public/lib'
};

return gulp.src('./views/*.html')
.pipe(wiredep(options))
.pipe(inject(injectSrc))
.pipe(gulp.dest('./views'));
});


Here's the error from accessing
index.html


GET file:///C:/public/css/styles.css net::ERR_FILE_NOT_FOUND
GET file:///C:/public/js/app.js net::ERR_FILE_NOT_FOUND


Project structure is

- project
- public
- css
- js
- lib
- views
gulpfile.js
etc..

Answer

The slash / before public:

<link rel="stylesheet" href="/public/css/styles.css">
<script src="/public/js/app.js"></script>

Should be removed, write this instead ="public/.. unless it will get path from the root of your drive if you are running locally.