Grunt on html css and js file 404 (Not Found)

Question

After fixing my css/scss compiling I'm now try to run the css on my html file, but I keep getting:

GET http://localhost:8080/dist/css/screen.css 404 (Not Found)localhost/:26

GET http://localhost:8080/source/js/modernizr.js 404 (Not Found)localhost/:28

Now, my paths on my html files is the follow:

<link href="dist/css/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
<script type"text/javascript" src="source/js/modernizr.js"></script>

What am I doing wrong? is it an html path issue? or is it a gruntfile.js issue? something must missing from either the html or gruntFile.js

hope it makes sense

module.exports = function(grunt) {

// Project configuration.
grunt.initConfig({
    config: {
            source: 'source/',
            dest: 'dist/',
            dist: './dist/'
        },
    connect: {
        options: {
            port: 8080,
            livereload: 35729,
            hostname: 'localhost'
        },
        livereload: {
            options: {
                open: true,
                base: '<%= config.source %>html',
                port: 8080
            }
        },
        dist: {
            options: {
                open: true,
                base: '<%= config.dest %>',
                livereload: false
            }
        }
    }, 
    watch:{
         compass:{
            options: {livereload: true },
            files:['<%= config.source %>**/*.scss'],
            tasks:['compass']
        },
        css: {
            options: {livereload: true },
            files: ['<%= config.dest %>*.css'],
            tasks: []
        },
        js: {
            options: { livereload: true },
            files: ['<%= config.source %>js/*.js'],
            tasks: ['jshint']
        },
        images: {
            options: { livereload: true },
            files: ['<%= config.source %>images/*.*']
        },
        fontsicons: {
            options: { livereload: true },
            files: ['<%= config.source %>images/icons/**/*.{svg,eot,woff,ttf,woff2,otf}']
        },
        livereload: {
              // Here we watch the files the sass task will compile to
              // These files are sent to the live reload server after sass compiles to them
              options: { livereload: true },
              files: ['<%= config.source %>html/*']
        }
    },
    compass: {
        dist: {
            files: [{
                expand: true,
                cwd: 'sass',
                src: ['source/sass/*.scss', '*.sass'],
                dest: 'css/',
                ext: '.css'
            }]
        }
      }
});

grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['connect:livereload', 'watch', 'compass', ]);

grunt.registerTask('icons', ['webfont']);

};

Answer 1

To get HTTP response from http://localhost:8080 you'll need a http server running on your computer listening on port 8080. If you have no such server running, you will get always 404 error.

E.g. on Node.js the most used is Express: http://www.tutorialspoint.com/nodejs/nodejs_express_framework.htm.

With this piece of code you'll get "Hello World" response on http://localhost:8080 and handle the routes /dist and /source:

var express = require('express');
var app = express();

app.get('/', function (req, res) {
   res.send('Hello World');
})

app.use(express.static(path.join(__dirname, 'dist')));
app.use(express.static(path.join(__dirname, 'source')));

var server = app.listen(8080, function () {
  var host = server.address().address
  var port = server.address().port
  console.log("Example app listening at http://%s:%s", host, port)
})