首页 > 其他 > 详细

浏览器自动刷新系列------browser-sync+gulp

时间:2017-02-22 18:04:07      阅读:159      评论:0      收藏:0      [点我收藏+]

      在网上看了好多关于browse-sync的使用介绍,基本都是把官网上的直接复制到博客上的,很少有实际的项目操作,当我把browser-sync+gulp在项目中使用的时候,因为要顾及到的文件较多,所以浏览器也很难实现时时刷新,还是有1-2s的运行时间的,废话不多说,看正文:

安装

npm install -g --save-dev gulp browser-sync

gulpflie.js代码

//加载gulp模块
var gulp = require(gulp);
//加载browser-sync模块
var browserSync = require(browser-sync).creat();
var reload = browserSync.reload;
//加载sass模块
var sass = require(gulp-sass);
//加载pug模块
var pug = require(gulp-pug);
//加载gulp-autoprefixer模块
var autoprefixer = require(gulp-autoprefixer);


/**
 * 这里静态服务器 + 监听 scss/pug/js 文件
 */
gulp.task(server,[sass,pug],function(){
    browserSync.init({
        server:./, //这里指的是根目录,如果你的index.html在根目录下,会直接打开index页面,不然会显示Get Not,自己写路径就行
        port:8081  //默认打开localhost:3000,现在改成localhost:8081
    });
    
    //监听 scss/pug/js 文件
    gulp.watch(sass/**/*.scss,[sass]);
    gulp.watch(jade/**/*.pug,[pug]);
    gulp.watch(page/**/*.js).on(change,reload);
});

/**
 * 编译sass
 */
gulp.task(sass,function(){
    return gulp.src(sass/**/*.scss)
        .pipe(sass().on(error, plugins.sass.logError))
        .pipe(autoprefixer(last 2 version, safari 5, ie 8, ie 9,       opera 12.1, ios 6, android 4)) //这个插件是用来加浏览器前缀的
        .pipe(gulp.dest(./page))
        .pipe(reload({stream:true}));
});

/**
 * 编译pug
 */
gulp.task(pug,function(){
    return gulp.src(jade/**/*.pug)
        .pipe(pug({pretty:true}))
        .pipe(gulp.dest(./page))
        .pipe(reload({stream:true}));
});
/**
* 默认运行
*/
gulp.task(‘default‘,[‘server‘]);

运行

gulp

 

浏览器自动刷新系列------browser-sync+gulp

原文:http://www.cnblogs.com/hess/p/6429998.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!