gulp实现的多浏览器同步刷新工具

Posted sujianfeng

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了gulp实现的多浏览器同步刷新工具相关的知识,希望对你有一定的参考价值。

  在项目根目录中,创建一个gulpfile.js的文件,其作用是命令行中执行 gulp 任务名   时,会执行gulpfile.js中的一个同名任务。

 1 var gulp = require(‘gulp‘);
 2 var less = require(‘gulp-less‘);  //less转化为css
 3 var cssnano = require(‘gulp-cssnano‘);  //css压缩
 4 var browserSync = require(‘browser-sync‘).create(); //多浏览器同步
 5 var htmlmin = require(‘gulp-htmlmin‘);  //压缩html
 6 var concat = require(‘gulp-concat‘);    //合并不同的js文件
 7 var uglify = require(‘gulp-uglify‘);    //js压缩混淆
 8 
 9 
10 gulp.task(‘copy‘,function(){
11     gulp.src(‘src/index.html‘)
12     .pipe(gulp.dest(‘dist‘))
13 });
14 
15 //刷新css
16 gulp.task(‘style‘,function(){
17     gulp.src(‘src/styles/*.less‘)
18     .pipe(less())
19     .pipe(cssnano())
20     .pipe(gulp.dest(‘dist/css/‘))
21     .pipe(browserSync.reload({
22                  stream:true
23            }));
24 });
25 
26 //html去除多余空格
27 gulp.task(‘minify‘,function(){
28            gulp.src(‘src/*.html‘)
29            .pipe(htmlmin({collapseWhitespace:true}))
30            .pipe(gulp.dest(‘dist‘))
31            .pipe(browserSync.reload({
32                  stream:true
33            }));
34 });
35 //js合并 压缩混淆
36 gulp.task(‘script‘,function(){
37     gulp.src(‘src/scripts/*.js‘)
38     .pipe(concat(‘all.js‘))
39     .pipe(uglify())
40     .pipe(gulp.dest(‘dist/scripts‘))
41     .pipe(browserSync.reload({
42         stream:true     //浏览器重新载入
43     }));
44 });
45 
46 //复制照片
47 gulp.task(‘image‘,function(){
48     gulp.src(‘src/imgs/*.*‘)
49       .pipe(gulp.dest(‘dist/imgs‘))
50       .pipe(browserSync.reload({
51             stream:true
52       }));
53 });
54 
55 //多浏览器同步刷新的主要部分,启动服务后,src中的文件有变动,就会触发watch,从而执行相应的任务。
56 gulp.task(‘serve‘,function(){
57     browserSync.init({
58         server:{
59             baseDir : ‘dist‘
60         }
61     },function(err,bs){
62         console.log(bs.options.getIn([‘urls‘,‘local‘]));
63     });
64     gulp.watch(‘src/styles/*.less‘,[‘style‘]);
65     gulp.watch(‘src/*.html‘,[‘minify‘]);
66     gulp.watch(‘src/scripts/*.js‘,[‘script‘]);
67     gulp.watch(‘src/imgs/*.*‘,[‘image‘]);
68 });

 

以上是关于gulp实现的多浏览器同步刷新工具的主要内容,如果未能解决你的问题,请参考以下文章

前端工具-浏览器同步测试(自动刷新热刷新热加载)

使用 Gulp 更改后浏览器同步不刷新页面

gulp-connect插件浏览器实时同步刷新

Browsersync结合gulp和nodemon实现express全栈自动刷新

BrowserSync - 浏览器同步测试工具

用gulp加速前端开发