• 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 });
  • 相关阅读:
    将Mat类型坐标数据生成pts文件
    DelaunayTriangulation_VoronoiDiagram_using_OpenCV的实现
    安装python第三方库
    安装wordcloud第三方库Unable to find vcvarsall.bat
    Vec3b类型数据确定颜色通道
    使用Inno Setup Compiler制作安装软件包
    QT-This application failed to start because it could not find or load the Qt platform plugin "windows"
    m函数与m文件的命名
    当前目录如何打开cmd
    [Machine Learning & Algorithm] 随机森林(Random Forest)-转载
  • 原文地址:https://www.cnblogs.com/sujianfeng/p/8684234.html
Copyright © 2020-2023  润新知