gruntjs - 设置 grunt 来启动和实时重新加载浏览器(使用最少的插件)

Question

我正在设置一个 Web 项目，并希望使用 grunt 实现自动化和工作流程。我有 sass、jshint、jsdocs、minifiers，它们都运行得很好，但从 grunt shell 启动和重新加载浏览器时却遇到了无穷无尽的麻烦。

我希望在执行此操作时满足 2 个条件:

没有浏览器插件。 (我希望它直接从存储库中工作；“npm install”，“grunt”)将 npm 模块保持在最低限度。 (理想情况下只是 grunt-contrib-watch 和 grunt-contrib-connect)

这是我对这两个的配置:

connect: {
    options: {
        base: 'app/',
        port: '8888',
        livereload: true
    }
},

watch: {
    all: {
        files: [
            'gruntfile.js',
            'app/index.html',
            'app/partials/*.html',
            'app/styles/sass/*.scss',
            'app/scripts/*.js'
        ],
        tasks: ['default'],
        options: {
            livereload: true
        }
    }
}

在测试中我也尝试过:

connect: {
    options: {
        base: "app/",
        port: 8888,
        open: {
            target: 'app/index.html'
        }
    }
}

Watch 会告诉我文件何时发生更改，但运行默认任务(或由其构成的任何子任务)不会启动浏览器/页面，并且似乎没有重新加载。

我在 grunt-open 方面取得了一些成功，但我相信在 0.6.0 版本之后，仅使用 grunt-contrib-watch 就可以实现这一目标？

-----附加我也不确定 grunt-contrib-connect 是否正在运行......

grunt.registerTask('serve',   ['sass', 'connect', 'watch']);
grunt.registerTask('default', ['jshint', 'serve']);

结果如下，我没有看到任何连接时间，我猜该任务没有被测量，因为它是并行运行的，但这就是发生的情况吗？

Execution Time 
loading tasks  12ms  ▇▇▇▇▇ 10%
jshint:src     78ms  ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 62%
sass:all       11ms  ▇▇▇▇▇ 9%
watch          24ms  ▇▇▇▇▇▇▇▇▇ 19%
Total 126ms

Answer 1

好吧，不确定是否是这样，但通过您的更新，我发现 connect 永远不会运行，因为您没有指定目标:

connect: {
    server: {  // try adding this block
        options: {
            base: 'app/',
            port: '8888',
            livereload: true
        }
    }
},

否则，这看起来基本上是正确的，但您也可以明确说明要实时重新加载的端口:

watch: {
    all: {
        files: [
            // ...
        ],
        tasks: ['default'],
        options: {
            livereload: 8888  // changed...
        }
    }
}