gruntjs - grunt-contrib-watch : { tinylr: "Welcome", 版本: "0.0.4"}

Question

我正在尝试使用 grunt-contrib-watch 和 grunt-contrib-compass 来让 grunt 工作。

到目前为止，我的 Gruntfile 看起来像这样:

module.exports = function (grunt){

    grunt.initConfig({

    compass : {

        dist : {
        options : {
            debugInfo : 'true'          
        }

        }

    },

    watch : {       
        files : ['*.html', 'js/*', 'sass/*'],
        task : ['compass'],
        options : {
        livereload: true,
        port : 35729
        }       
    }

    });


    grunt.loadNpmTasks('grunt-contrib-watch') ;
    grunt.loadNpmTasks('grunt-contrib-compass') ;

    grunt.registerTask('default', ['watch'])

} ;

我正在使用 chrome live-reload 扩展程序。

如果我随后运行“grunt -v”，我可以看到 grunt 按预期监视我的 html 和 sass 文件。正如预期的那样，我的浏览器选项卡会自动重新加载。

在浏览器选项卡中，我转到此地址:

http://localhost:35729

但是，在我的浏览器中，我只在加载和重新加载时看到这个:

{
tinylr: "Welcome",
version: "0.0.4"
}

我没有看到我的 index.html。只是对象。

我需要做什么才能看到我的网站？

Answer 1

http://localhost:35729是实时重新加载服务器的地址，而不是您的网站。您的网站仍然需要从它自己的地址/端口提供服务，例如 http://localhost:8000 .通过 grunt-contrib-connect 任务、其他一些 node.js 服务器或提供文件 apache/nginx 的服务器。

http://localhost:35729仅用于将实时重新加载脚本加载到您的页面中:<script src="http://localhost:35729/livereload.js"></script>然后根据更改将使用网络套接字触发和更新您网站上的页面。