Livereload How to use

This auto-refresh plug-in has been engaged for several hours still do not understand, quickly be angry, want to use Browser-sync results NPM has been turning and turn all the time stuck.

At last, I found that my IQ was too low ... That's probably what happened.

First of all, if you don't play with node/npm/gulp/livereload, this thing is far away from you, and you might even have to spend some time understanding what these things are.

Then you have to download a livereload chrome plug-in, as a chrome expansion program used, the name affixed to the "CHROMEIN.COM_EXT_11631.CRX", Baidu can download, csdn, not points can be under, very convenient. It's good to put it down later (Don't tell me you won't be installing chrome extensions, mouse-dragging things.) ）

And then write some code in your gulpfile.js, and I'll post the demo on GitHub.

var gulp = require (' Gulp '),    = require (' gulp-less '),    = require (' Gulp-livereload ') ); Gulp.task (function() {  gulp.src (' less/*.less ')    . Pipe (Less ())    . Pipe (Gulp.dest (' CSS '))    . Pipe (Livereload ());}); Gulp.task (function() {  livereload.listen ();  Gulp.watch (' less/*.less ', [' less ']) ;

Starting with the last watch task, once we've modified the less file in less, the system will execute less this task,less task is to compile all of the lower files into CSS files and put them under the CSS folder. Finally do another reload, such a look at a glance.

I put my demo again, my demo is not related to less, as long as you modify the CSS file directly overloaded, this special is called demo, after the demo is written in this format!!!

var gulp = require (' Gulp '); var livereload = require (' gulp-livereload '); Gulp.task (function() {    gulp.src ( ' Css/*.css ')        . Pipe (Livereload ());}); Gulp.task (function() {    livereload.listen ();    Gulp.watch (' css/*.css ', [' CSS ']);});

And then it's the launch mission!

Gulp <your task Name> in CMD; we're watch here, so that's gulp watch.

Open the Web page with the server's address !!!

Open the Web page with the server's address !!!

Open the Web page with the server's address !!!

Important thing to say three times!!!

Click on the icon of the Livereload-chrome plugin, just to the right of the address bar, you do not point when it is hollow, point it on the climax of the inside becomes a black solid, like this:

Then when you change the CSS file after ctrl+s, the page will automatically refresh!

However, it is said that Browser-sync can be connected to the mobile side of the refresh, all the browser on the PC can be refreshed, and scrolling click on what is at the same time, much more powerful than livereload.

So tomorrow to see the character of NPM, if the character is good, there is no livereload what happened!

varGulp = require (' Gulp '));varSass = require (' Gulp-ruby-sass '));varAutoprefixer = require (' gulp-autoprefixer '));varMinifycss = require (' gulp-minify-css '));varJshint = require (' Gulp-jshint '));varUglify = require (' gulp-uglify '));varImagemin = require (' gulp-imagemin '));varRename = require (' Gulp-rename '));varConcat = require (' Gulp-concat '));varNotify = require (' gulp-notify '));varCache = require (' Gulp-cache ');varLivereload = require (' Gulp-livereload '));vardel = require (' del ');varless = require (' gulp-less ') Gulp.task (' Default ',function() {  //Default task code}); Gulp.task (' Minify-css ',function(){    returnGulp.src ('./css/*.css ')). Pipe (rename ({suffix:'. Min '}). Pipe (Minifycss ()). Pipe (Gulp.dest ('./css/min ') . Pipe (notify ({message:' Minify-css task complete '}));}); Gulp.task (' Less ',function() {GULP.SRC (' Less/*.less '). Pipe (Less ()). Pipe (Gulp.dest (' CSS ') . Pipe (Livereload ());}); Gulp.task (' Styles ',function() {GULP.SRC (' Css/*.css '). Pipe (Livereload ());}); Gulp.task (' Scripts ',function() {GULP.SRC (' Js/*.js '). Pipe (Livereload ());}); Gulp.task (' Watch ',function() {Livereload.listen (); Gulp.watch (' Less/*.less ', [' less ']); Gulp.watch (' Css/*.css ', [' Styles ']); Gulp.watch (' Js/*.js ', [' Scripts ']);});

Livereload How to use