Grunt's Connect, watch

First of all, the use of these two plug-ins together, simply said, they can save your F5. Connect is used to set up a static server, watch monitor file changes and automatically refresh the browser's page in real time.

Or the options go up.

Options (GitHub address) for Connect (V0.9.0)

2. Port: Static server listening ports, default 8000
4. Protocol: Protocol name, support ' http ' and ' https ', default ' http '
6. Hostname: A legitimate hostname, the default ' 0.0.0.0 ', means that only devices that can ping to this computer can be accessed via IP and set to ' localhost ' to support native access only
7. Base: Static server file root directory, support for string, Array, Object
   OK, the introduction of the above four can be a simple static server, file directory or back, SRC under the structure
   
   Use all the option you can use.
   

   Connect: {    options: {        9000,        ' http ',        ' localhost '    },    serve: {        options: {            base: [                ' src ']}}    }

   And grunt, print out a piece of this stuff.

   " Connect:serve " (connect) taskstarted Connect Web server on http: // localhost:9000 Done , without errors.

   Visit http://localhost:9000/, actually reported "This page cannot use", what meaning?
   The reason is that when the grunt task ends, the Connect task also ends, that is, the static server is turned on, at the moment of execution. Is this for human access, and my expression was like this:
   In fact, this millisecond-level server is really not for people to access, is used to test: Open the server, run the test code, shut down the server.

   As a primate, you need to use the option below to access it.
8. KeepAlive: Don't explain, just run.
   

   Connect: {    options: {        9000,        ' http ',        ' localhost '    },    serve: {        options: {            base: [                ' src '            ],            true        }}    }

   Compare the above, feel it.

   " Connect:serve " (Connect) taskwaiting forever ... Started Connect Web server on http://localhost:9000

   Normal access, http://localhost : 9000 directly linked to the index.html, this should be a server-side redirect, we change index.html to main.html, and then manually refresh the page, see the entire folder under the directory structure (note that this is not a static server must function, can only say that connect at this point to do Very delicate).
   
   

   Remember that the value of base can be set to an object, the object contains two properties, path corresponds to the folder name above, the options will be passed to the Connect.static module, see the page for details.
   You can also set an array, either a string or an array of objects, and we'll change the main.html back to index.html and then modify the base
   

   base: [    ' src ',    ' dest ']

   Dest is the previous output directory, the directory structure is the same
   
   

   SRC and dest below have index.html, then we through http://localhost:9000/access to which one, the actual operation, found to be src below the index.html,The search for visible files is higher than the previous folder priority
   We put two folders under the index.html to main.html, again access http://localhost:9000/, get the directory structure is dest, the Visible folder index display is the following folder priority higher
   If I want it to show the SRC directory structure, is there a way? Yes, that's the option below.
10. Directory: Default is NULL, set to ' src ' to complete the above target
12. debug: Print each HTTP request, default is False, set to true after accessing Http://localhost:9000/, print out the following
    

     Running  "  Connect:serve    //  localhost:9000  [D] Server GET/200  7484 -10.211  Ms 

14. Open: Whether to automatically open the browser, the default is False, set to true to automatically open the Http://localhost:9000/in the browser after running grunt, but also can accept the URL as value, For example, we want to directly access main.html
    

     open: ' <%=connect.options.protocol%>://<%=connect.options.hostname%> <%=connect.options.port%>/main.html ' 

    can also accept object as the Value,object structure as follows

     {target:  ' <%=connect.options.protocol%>://<%= Connect.options.hostname%>:<%=connect.options.port%>/main.html '  AppName :  ' Chrome ', //  name of the app that opens
           callback: function  () {} //  Called when the app has opened } 

     

16. Useavailableport: Automatically switch to a different port when the port is occupied, default is False
    I open another server listening 8081, and then change the configuration port to 8081, the execution of Grunt failed, print out the log is
    

     Running  connect:serve   "  8081  is already in  use by another process. 

    Set this option to true to execute again, automatically swapping to port 8082

     Running  connect:serve   "  //  localhost:8082  

     

18. Oncreateserver: Creates a server successful callback function that accepts the function or function array as value and defaults to NULL.
    The example given on GitHub is as follows:
    

     oncreateserver: function   var  io =    Require (' Socket.io ' ). Listen (server); Io.sockets.on ( ' connection ', function   ( Socket) { //  do something with SOCKET 

20. Middleware: Middleware, accepts the function or function array as value.
    When value is function, incoming parameters Connect, options, Middlewares
    

    function (Connect, options, middlewares) {    return middlewares;    // The current behavior remains the same }

    When value is a function array, the incoming parameter request, response, next

    Middleware: [function(req, res, next) {    next ();}]

    The above two option involves more nodejs concepts, not detailed

21. Livereload: Deliberately put this option to the end, because this option is the core of real-time refresh, relying on the implementation of Connect-livereload, so the plug-in is installed on the first
    The default value is False, which generally accepts the port number as a parameter and is set to True when set to 39729,so
    

    Connect: {    options: {        9000,        ' http ',        ' localhost '    },    serve: {        options: {            base: [                ' src '            ],            true,              True        }}    }

    Execute grunt, access any one of the server's content links, open the Developer tool, find the body (remember that the HTML must have body, lazy will not see the effect) at the bottom of the production of such a code

    <Script>//<! [Cdata[document.write ('<script src= "//' +(Location.hostname|| 'localhost') + ': 35729/livereload.js?snipver=1 "><\/script>')//]]></script><script src= "//localhost:35729/livereload.js?snipver=1" ></script>

    This code alone is meaningless and must match watch

Watch's match

Originally wanted to introduce the watch, and found that it has been so long, just to say that the realization of livereload it.

Watch is a monitor that listens for changes to files and acts accordingly. It has a special option that is used to implement the automatic page refresh feature: Livereload. Yes, it's the same as option above.
So, give the final code.

Connect: {    options: {        9000,        true,        ' localhost ',         true  // the port declared to watch monitoring     },    livereload: {        options: {            base: [                ' src '            ]        }    }},watch: {    Livereload: {        options: {            true        },        files: [             ' src/{,*/}* '         ]    }}

Careful will find that keepalive this value is missing, because the presence of watch Grunt will always be in the state of execution, so the server will not terminate. Instead, if the keepalive is set to True,connect will always block, watch will not execute, get the desired result.

To know the funeral, and listen to tell.

Grunt's Connect, watch