Gulp Implementing a server

Gulp Implementing a Web server

Gulp Implementing a Web server

Read Catalogue

• One: Gulp implement Web Server configuration:
• Second: Add real-time refresh (livereload) support

Back to Top

One: Gulp implement Web Server configuration:

For the front-end development, need to build a local server for development use, although sometimes you can directly open the page to preview, but sometimes the page needs to run on the server, the previous practice is to download a PHP, directly installed, or use Nodejs as a Web server, Today we can learn to use a plug-in Gulp-connect gulp to configure as a local server to use, of course, the plug-in is also in the NODEJS environment.

One: Gulp implement Web Server configuration:

Initializing the installation

First, use the following command to install the Connect plugin.

sudo npm install--save-dev gulp-connect

So the Package.son content code becomes as follows:

{  "name": "Tongbanke",  "version": "1.0.0",  "description": "Tobanke" ",  " main ":" Main.js ",  " Scripts ": {    " test ":" Test "  },  " repository ": {    " type ":" Git ",    " url ":" Gulp "  },  " Keywords ": [    " Gulp ",    " test "  ],  " author ":" Kongzhi ",  " license ":" ISC ",  " Devdependencies ": {    " gulp ":" ^3.6.2 ",    " Gulp-connect ":" ^2.0.5 "  }}

The Gulpfile.js code is as follows

var gulp = require (' Gulp '),    connect = require (' Gulp-connect '); Gulp.task (' webserver ', function () {    Connect.server ();}); Gulp.task (' Default ', [' webserver ']);

As above is the Package.son code and Gulpfile.js code, we can directly copy down, new Package.son and Gulp file.js two files, and then into the project directory NPM install can load all the dependencies. Such as:

That's fine, and then we'll run the Gulp command under the Terminal command, as follows:

Then we open localhost:8080/index.html in the browser can see the content, Gulpfile.js file is in the root directory of the site, the server will be running, monitoring localhost:8080, if we want to stop the server, You can go back to the interrupt command and press CTRL + C. This demo I also put on GitHub, as follows:

Https://github.com/tugenhua0707/basic

We can use Git to clone it down to a local directory, then go to that directory and use the terminal command

NPM Install, you can extract all the dependencies. Run the Gulp command again after running in the browser

Http://localhost:8080/can see the index.html page.

Back to Top

Second: Add real-time refresh (livereload) support

Above we have completed the implementation of the server using Gulp-connect, now we need to implement real-time refresh, so that whenever I change a file, I do not need to rerun the command, directly save the code to take effect, so we now need to do two things:

1. Allow the Web server to start with real-time refresh support.

2. Tell the organization when it should be refreshed automatically.

The implementation of the first step is simple: simply pass in an argument to the Connect.server () method:

{livereload:true}, as shown in:

For the second step, we simply implement the following using Gulpfile.js to listen to less files, automatically compile less files into a CSS file, and inject it into the browser, in order to compile less files, we need to use the Gulp-less plugin, we can run the following command:

sudo npm installs--save-dev gulp-less to install the gulp-less, and add this dependency in the Gulpfile.js file, and now I can see the Package.json code into the following:

package.son{  "name": "Tongbanke",  "version": "1.0.0",  "description": "Tobanke" ",  " main ":" Main.js ",  " scripts ": {    " test ":" Test "  },  " repository ": {    " type ":" Git ",    " url ":" Gulp "  },  "keywords": [    "Gulp",    "test"  ],  "author": "Kongzhi",  "license": "ISC",  " Devdependencies ": {    " gulp ":" ^3.6.2 ",    " Gulp-connect ":" ^2.0.5 ",    " gulp-less ":" ^1.2.3 ",    " Gulp-coffee ":" ^1.4.2 ",    " Gulp-watch ":" ^0.6.2 "  }}

The Gulpfile.js code changes to the following:

gulpfile.js//define dependencies var gulp = require (' Gulp '),    connect = require (' Gulp-connect '), less    = require (' gulp-less ') ); Define webserver task Gulp.task (' webserver ', function () {    connect.server ({      livereload:true    });});//define Less Task Gulp.task (' Less ', function () {    gulp.src (' styles/main.less ')        . Pipe (Less ())        . Pipe (gulp.dest (' Styles ') )        . Pipe (Connect.reload ());}); Define Watch Task Gulp.task (' Watch ', function () {    gulp.watch (' styles/*.less ', [' Less '])})//define Default task Gulp.task (' the ' default ', [' less ', ' webserver ', ' watch ']);

I'll check the door again. The current directory structure is as follows:

As in the Gulpfile.js file, I use watch this task to listen to less files, whenever the file changes, I will compile the task of less, and then write the compiled file to the target file, so when I go back to the terminal command to run the Gulp command, whenever my door CSS file has more Change words, can be real-time listening to, for the 2nd supervisor heard words, gulp have gulp-watch this plug-in, in fact, can do better; Similarly, in order to have the source code, also put the project into git inside, we can also put it git clone down, self-run can: the following:

Https://github.com/tugenhua0707/livereload

If you want to learn Gulp watch plugin and compression and merge code, you can read the following articles:

Http://www.cnblogs.com/tugenhua0707/p/4069769.html

Gulp Implementing a server