Gulp-前端进阶A-3---如何不刷新监控文件变化?

npm install --save-dev gulp-connect

npm install --save-dev gulp-livereload

npm其他,前面已有

 1 var gulp = require('gulp'),
 2     gulpLoadPlugins = require('gulp-load-plugins'),
 3     plugins = gulpLoadPlugins();
 4 
 5 var paths = {
 6   src   : "src/",
 7   css   : "src/css/",
 8   scripts    : "src/js/",
 9   scss  : "src/scss/",
10   img   : "src/images/",
11   html  : "src/html/", 
12   build : "build"
13 }
14 //创建服务器
15 gulp.task('webserver',function(){
16     plugins.connect.server({port:8000,livereload:true}); 
17 });
18 /////////////////////////////////
19 gulp.task('scripts', function() {
20   return gulp.src(paths.scripts+ "**/*.js")
21     .pipe(plugins.concat('all.js'))
22     .pipe(plugins.uglify())
23     .pipe(gulp.dest(paths.build + '/js'));
24 });
25 gulp.task('css', function() {
26   return gulp.src(paths.css+ "**/*.css")
27     .pipe(plugins.concat('all.css'))
28     .pipe(plugins.minifyCss())
29     .pipe(gulp.dest(paths.build + '/css'));
30 });
31 gulp.task('html',function(){
32     return gulp.src(paths.html + "**/*.html")
33     .pipe(gulp.dest(paths.build +'/html'));
34 });
35 ///////////////////////////
36 gulp.task('reload-dev',['scripts','css','html'],function() {
37   return gulp.src(paths.src + '**/*.*')
38     .pipe(plugins.connect.reload());//服务器重启和各文件变化
39 });
40 //监听
41 gulp.task('watch', function() {
42     gulp.watch(paths.src + '**/*.*',['reload-dev']);
43 })
44 
45 gulp.task('default', ['webserver','reload-dev','watch']);
46 //此处顺序有先后吗?

这里我打开localhost:8000这个鬼

不好打开生成的html文件,暂手动打开,而且要手动刷新,没有自动刷新

然后src下的js,css,html有变动时,build里的文件随之变化

此处还要注意各文件引用路径,生成处并不一样

原文地址:https://www.cnblogs.com/hhweb/p/5726028.html