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

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

苏南大叔:grunt任务执行完毕,如何自动打开浏览器查看效果? - grunt-hero
grunt任务执行完毕,如何自动打开浏览器查看效果?(图3-1)

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

龙套演员

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

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

grunt server

其配置文件是:Gruntfile.js

苏南大叔:grunt任务执行完毕,如何自动打开浏览器查看效果? - grunt-open-browser
grunt任务执行完毕,如何自动打开浏览器查看效果?(图3-2)

grunt-open插件

官方github地址:

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']);

苏南大叔:grunt任务执行完毕,如何自动打开浏览器查看效果? - 配置文件
grunt任务执行完毕,如何自动打开浏览器查看效果?(图3-3)

如果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
    }
  });
})

相关文档

综述

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

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

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   node    grunt