设置 grunt 以启动和实时重新加载浏览器（使用最少的插件）

Question

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

我想满足两个条件：

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

这是我对那 2 个的配置：

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