Gruntfile 启动服务器，自动重新加载，在浏览器中自动打开答案

【问题标题】：Gruntfile start server, autoreload, auto open in broswerGruntfile 启动服务器，自动重新加载，在浏览器中自动打开
【发布时间】：2017-03-19 07:20:26
【问题描述】：

大家好，我是 gruntfile 和前端开发的新手，我正在尝试设置 gruntfile，以便它可以从我的默认任务运行服务器，这确实有效，但它不会在 index.htmt 上打开，而是在Grunt-Serve page 然后我必须导航到 src/index.html。

我的 gruntfile：

module.exports = function(grunt) {
  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    serve: {
        options: {
            port: 9000,
            hostname: 'localhost',
        }
    }
  });

  //Load Grunt serve task
  grunt.loadNpmTasks('grunt-serve');

  grunt.registerTask('default', ['serve']);

};

package.json:

  "devDependencies": {
    "grunt": "^1.0.1",
    "grunt-serve": "^0.1.6"
  }

我之前也看到可以使用 gruntfile 或 serve 任务在浏览器中自动打开项目...我需要这个包...？而且一旦开发，我希望看到我的变化。

有任何帮助

【问题讨论】：

标签： javascript gruntjs package.json

【解决方案1】：

您可能正在寻找浏览器同步。它通常会自动打开浏览器。您可以在此处查看一些配置示例：https://www.browsersync.io/docs/grunt

但为了让您入门，请尝试以下设置：

首次运行$ npm install grunt-browser-sync --save-dev

Gruntfile.js：

module.exports = function(grunt) {
  grunt.initConfig({
    browserSync: {
      bsFiles: {
        src : [
          'index.html',
          'paths/to/files/for/autoreload'
        ]
      },
      options: {
        server: {
          baseDir: "./"
        }
      }
    }
  });

  grunt.loadNpmTasks('grunt-browser-sync');

  grunt.registerTask('default', ['browserSync']);
};

baseDir 将尝试在您指定的目录中打开任何名为 index.html 的文件，但我很确定您也可以配置它。您还可以根据需要更改文件结构并调整配置。

在src 中添加您想要观看并自动重新加载的路径。请注意，如果您将其与 sass 或其他预处理器结合使用，您可能需要查看其他示例。

【讨论】：