Livereload introduction, livereload

Livereload introduction, livereload

LivereloadIt can be understood as instant refresh. In front-end development, developers need to switch from the editor to the browser after writing or debugging html/js/css code, and then refresh the browser to see the page changes, this very frequent operation affects the work efficiency to a certain extent, and Liverelod can help our ad solve this problem.

There are multiple ways to implement livereload. You can use Livereload software to add browser plug-ins, or use nodejs to implement it through the gulp or grunt task runner, but the basic principles are the same, that is, by enabling a local websocket service to detect file changes, when the file is modified, the livereload task is triggered, and the message is pushed to the browser to refresh the page.

Among the many implementation methods, it is obviously unnecessary to use other software or browser plug-ins than nodejs code implementation. Here we introduce the implementation method of gulp, which I personally think is a simple and quick method.

Implement livereload using gulpjs

First install nodejs, and then install the gulp and gulp-connect modules.

$ Sudo npm install-g gulp // global install gulp Module

Switch to the project root directory

  $ mkdir ~/gulptest && cd ~/gulptest  $ npm init  $ npm install --save-dev gulp gulp-connect  $ touch gulpfile.js

Under the project root directory, you must haveGulpfile. jsThis file

var gulp = require('gulp'),  connect = require('gulp-connect');gulp.task('connect', function() {  connect.server({    root: 'app',    livereload: true  });});gulp.task('html', function () {  gulp.src('./app/*.html')    .pipe(connect.reload());});gulp.task('watch', function () {  gulp.watch(['./app/*.html'], ['html']);});gulp.task('default', ['connect', 'watch']);

Run the following command in the root directory after creating the gulpfile. js file:

  $ gulp

You can see that the web server and livereload server are started locally. Now, after you open http: // localhost: 8080 and edit the html file, you can see that the browser is automatically refreshed.

Use yoeman generator to generate project scaffolding that has integrated livereload Functions

Install yeoman and generator (generator-gulpx)

  $ sudo npm install -g yo generator-gulpx

Create a project

  $ mkdir ~/yogulpx/ && cd ~/yogulpx  $ sudo yo gulpx  $ gulp

We can see that yeoman generator can be used to easily build projects. We recommend that you use

Recommended Viewing:
Introduction to gulp (a 15-minute introduction video)