对 html css 和 js 文件 404 咕哝（未找到）

Question

修复我的 css/scss 编译后，我现在尝试在我的 html 文件上运行 css，但我不断收到：

GET http://localhost:8080/dist/css/screen.css 404（未找到）localhost/:26

GET http://localhost:8080/source/js/modernizr.js 404（未找到）localhost/:28

现在，我的 html 文件路径如下：

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

我做错了什么？这是一个html路径问题吗？还是 gruntfile.js 问题？ html 或 gruntFile.js 中必须缺少某些内容

希望有意义

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

要从http://localhost:8080 获得 HTTP 响应，您需要在您的计算机上运行一个 http 服务器，侦听端口 8080。如果您没有运行这样的服务器，您将始终收到 404 错误。

例如在 Node.js 上使用最多的是 Express：http://www.tutorialspoint.com/nodejs/nodejs_express_framework.htm。

通过这段代码，您将在 http://localhost:8080 上获得“Hello World”响应并处理路由 /dist 和 /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)
})