Grunt на HTML CSS и JS файл 404 (не найден)

Question

После фиксации мой CSS/SCSS компиляции теперь я пытаюсь запустить CSS в моем HTML файл, но я получаю:

GET http://localhost:8080/dist/css/screen.css 404 (Не Найдено) локальный /: 26

GET http://localhost:8080/source/js/modernizr.js 404 (Not Found) локальный /: 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 от http://localhost:8080 вам нужен сервер HTTP работает на вашем компьютере прослушивания на порт 8080. Если у вас нет такого сервера, вы получите всегда ошибку 404.

E.g. на Node.js наиболее часто используется Express: http://www.tutorialspoint.com/nodejs/nodejs_express_framework.htm.

С помощью этой части кода вы получите «Hello World» ответ на http://localhost:8080 и обрабатывать маршруты/расст и/источник:

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) 
})