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)