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 命令行可以好好看下

  • 相关阅读:
    Ext.dataGroupingStore/JsonStore/SimpleStore
    转:LinQ操作汇总(From CSharpSamples)
    XSLT教程 比较全的
    使用ASP.Net Forms模式实现WebService身份验证
    关于DataRow的RowState和RowVersion
    C#日志工具汇总
    转 Using log4net,
    js//初始话日期
    两个数据库表的连接 查询
    ExtJS入门之三 查询
  • 原文地址:https://www.cnblogs.com/wang-jing/p/5635949.html
Copyright © 2011-2022 走看看