zoukankan      html  css  js  c++  java
  • browsersync

    以后不需要F5了

    之前实现自动刷新,是通过livereload,它需要插件比较麻烦;现在改为browsersync。

    BrowserSync,迅捷从免F5开始
    完整选项
    不止是自动刷新:默认就有
    UI界面,weinre

    用法:
    1、静态网站 browser-sync start --server --files "css/.css, .html"
    2、动态网站 browser-sync start --proxy "主机名" --files "css/
    .css"
    nodejs browser-sync start --proxy "localhost:3000" --files "css/
    .css"; 需要先把原来的网站打开;
    browser-sync start --server --files "**";此时,BrowserSync仍然会正确地判断文件变化是否是css。
    3、与gulp结合
    把1 2的功能用gulp来实现

    var gulp = require('gulp');
    var browserSync = require('browser-sync');
    
    // 静态网站
    // gulp.task('browser-sync', function(){
    //   browserSync({
    //     files: '**',
    //     server: {
    //       baseDir: './'
    //     }
    //   })
    // })
    
    // 动态网站
    gulp.task('browser-sync', function() {
        browserSync.init({
            files: '**',
            proxy: "localhost:3000"
        });
    });
    
    gulp.task('default', ['browser-sync']);
    

    scss js的处理:分别用了不同的方法,实现的效果是一样的,多多体会

    var gulp        = require('gulp');
    var browserSync = require('browser-sync').create();
    var sass = require('gulp-sass');
    var uglify = require('gulp-uglify');
    
    // 静态服务器
    gulp.task('serve', function() {
        browserSync.init({
            files: '**',
            server: {
                baseDir: "./"
            }
        });
    
        gulp.watch('css/*.scss', ['sass']);
        gulp.watch('*.html').on('change', browserSync.reload);
        gulp.watch('js/*.js', ['js-watch']);
    });
    
    gulp.task('sass', function(){
      return gulp.src('css/*.scss')
             .pipe(sass())
             .pipe(gulp.dest('css'))
             .pipe(browerSync.reload({stream: true}));
    })
    
    gulp.task('js-watch', ['js'], browserSync.reload);
    
    gulp.task('js', function(){
      return gulp.src('js/*.js')
             .pipe(uglify())
             .pipe(gulp.dest('dest'))
             ;
    })
    
    gulp.task('default', ['serve']);
    

    SASS & Source Maps 还么看
    API 命令行可以好好看下

  • 相关阅读:
    RHEL7使用ssm命令管理LVM
    LVM命令摘要
    Linux用户磁盘配额
    Linux磁盘分区实战案例
    通过yum升级CentOS/RHEL最小化安装
    RHEL7下PXE+FTP+Kickstart无人值守安装操作系统
    配置VSFTP服务器
    RHEL7下PXE+NFS+Kickstart无人值守安装操作系统
    RHEL7下PXE+Apache+Kickstart无人值守安装操作系统
    html5实现图片自适应手机屏幕页面的css
  • 原文地址:https://www.cnblogs.com/wang-jing/p/5635949.html
Copyright © 2011-2022 走看看