0

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']);

};
4

1 に答える 1

0

http://localhost:8080から HTTP 応答を取得するには、ポート 8080 でリッスンしているコンピューターで http サーバーを実行する必要があります。そのようなサーバーが実行されていない場合は、常に 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)
})
于 2016-02-11T14:00:25.750 に答える