grunt任务执行完毕，如何自动打开浏览器查看效果？

我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

最近在写关于elastic的文章，需要本机运行民间推荐的head插件。这个是个nodejs的项目，执行的方式是grunt server。那么，执行完毕后。还需要手工打开浏览器，访问对应本机端口号，才可以打开对应界面。那么，是否可以自动打开对应网址呢？

大家好，这里是苏南大叔的“程序如此灵动”博客，这里记录苏南大叔和计算机代码的故事。本文描述如何配置使用grunt-open插件。测试环境：win10，node@16.14.2,npm@8.3.0,grunt@1.0.1，grunt-open@0.2.4。

龙套演员

本文的龙套演员是elasticsearch-head@5.0.0，

• https://github.com/mobz/elasticsearch-head

elasticsearch-head 是基于nodejs的，执行方式是：npm start。根据package.json的记载，实际命令是：

grunt server

其配置文件是：Gruntfile.js。

grunt-open插件

官方github地址：

• https://github.com/jsoverson/grunt-open

npm i grunt-open --save

配置方式上，首先要配置grunt.initConfig()：

grunt.initConfig({
    open: {
        dev: {
            path: 'http://127.0.0.1:9100/',
            // app: 'Google Chrome'
        }
    }
});

然后需要配置loadNpmTasks()

grunt.loadNpmTasks('grunt-open');

最后配置registerTask，这个配置点很重要，因为connect:server是执行之后就不会停下来。所以，一般要配置在这个之前。例如：

grunt.registerTask('server', ['open:dev','connect:server']);

如果open定义了好多的打开浏览器操作，执行之后就会打开很多浏览器界面。所以，如果要不只定义一个项目，要不就在任务里面，只加入其中一个任务。不要学习官方的例子里面，定义很多个open项目。

官方提到的自动获得对应路径的方法，目前在最新版本的grunt里面无法实现。所以，还是手工写一个地址吧，这个事情也不难。

延迟执行

官方界面上还介绍了一个自定义打开时机（延迟执行）的方式。但是苏南大叔觉得用不到，官方自己也不是很推荐。

grunt.initConfig({
  open: {
    delayed: {
      path: 'http://localhost:3000',
      app: 'Google Chrome',
      options: {
        openOn: 'serverListening'
      }
    }
  }
});
grunt.registerTask('server', function () {
  var server = require('myServer');
  server.listen(3000, function (err) {
    if (!err) {
      grunt.log.writeln('Server started');
      grunt.event.emit('serverListening'); // triggers open:delayed
    }
  });
})

相关文档

• https://github.com/jsoverson/grunt-open
• https://newsn.net/say/grunt-watch.html
• https://newsn.net/say/elastic-search-head.html

综述

本文的效果是，打开head的时候，执行grunt server的时候，会自动打开对应的浏览器界面。对于本机调试的情况是非常有用的。但是，如果你的head部署在远程服务器上面的话，这个操作就显得有些多余。

• https://newsn.net/tag/grunt/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。