-->

Run grunt server with various browsers

2019-04-19 14:44发布

问题:

Is it possible to specify a particular browser (besides the OS' default) in the gruntfile or at the command prompt? E.g. "grunt server firefox" or the like. My default browser is Chrome, but I want to test/develop my site in multiple browsers. I am using GruntJS within Yeoman.

Bryan

回答1:

Quick Answer

In Gruntfile.js you can add an app parameter:

open: {
  server: {
    url: 'http://localhost:<%= connect.options.port %>',
    app: 'firefox'
  }
},

Pull request: https://github.com/jsoverson/grunt-open/pull/7

Commit: https://github.com/GabLeRoux/grunt-open/commit/6f2c7069767e58160ec96aaaa8fa20ed210ba183


Command Line Parameters

It is possible to pass command line parameters in the app string, such as app: "chromium-browser --incognito" - @bk11425



回答2:

From the documentation of grunt connect: https://github.com/gruntjs/grunt-contrib-connect

You can use:

    open: {
        target: 'http://localhost:8000', // target url to open
        appName: 'open', // name of the app that opens, ie: open, start, xdg-open
        callback: function() {} // called when the app has opened
    }

i.e. appName: 'Google Chrome'



回答3:

While the answers in here helped fix my occurrence of the problem, as someone who's not very familiar with grunt, I had a hard time figuring just exactly where I was supposed to put the "open:" stanza in my Gruntfile.js. It took me about three three tries for me to find the right spot (e.g I tried directly under 'grunt.initConfig' and under 'connect: options:' to no effect)

I'm using the Gruntfile.js as generated by the standard angular yeoman generator.

I'm posting where I put it in this file just to give a little more "context" for anyone in a similar predicament.

Here is the relevant snippet of the Gruntfile.js:

// ...
The actual grunt server settings
connect: {
  options: {
    port: 9000,
    // Change this to '0.0.0.0' to access the server from outside.
    hostname: 'localhost',
    livereload: 35729
  },
  livereload: {
    options: {
      //open: true, <- original line, comment out
      // add this
      open: {
        //target: 'http://localhost:9000', <- this works too
        target: 'http://localhost:<%= connect.options.port %>',
        appName: 'firefox'
      },
      // end add
      middleware: function (connect) {
        return [
          connect.static('.tmp'),
          connect().use(
            '/bower_components',
            connect.static('./bower_components')
          ),
          connect().use(
            '/app/styles',
            connect.static('./app/styles')
          ),
          connect.static(appConfig.app)
        ];
      }
    }
  },
  test: {
//...


回答4:

The grunt server task has almost nothing to do with the browser, it just starts a static server for you to connect to and preview your app. You could theoretically use any browser you want to connect to http://localhost:8080/

To clarify based on the poster's comment:

grunt-open is a different task than grunt-server: https://npmjs.org/package/grunt-open.grunt-open uses node-open which just defaults to the default open task for darwin or start for win32: https://github.com/jjrdn/node-open#how-it-works

So, to answer, whatever application you have specified to open .html files (or whatever you're opening) will open with this task.