Browsersync 是一个前端调试的利器,它能够让你在页面文件改动之后自动刷新浏览器,从而方便了前端的调试工作。

本文就是对于 Browsersync + Gulp 的配置作个简单的笔记。

因为使用Gulp的话,相比起来使用Browser-sync自带的命令行简单点。而且有更多的选择。

首先安装 Browsersync 与 Gulp:

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

在 gulpfile.JS 中创建新任务:

文件都放在APP中。

var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var config = {  
    baseDir: 'app',
    watchFiles: [ 'app/*.html', 'app/css/*.css', 'app/js/*.js' ]
    }
gulp.task('server', function() {
    browserSync.init({
        files: config.watchFiles,
        server: {
            baseDir: config.baseDir
        }
    });
})
gulp.task('default',['server']); //定义默认任务

这里表示以 app 目录作为根目录启动 HTTP 服务,并监听 app 目录下的所有 html、css 以及 js 类型的文件,当这些文件有改动时 Browsersync 会自动刷新浏览器页面。

如果想配合使用 SASS 之类的,可以参考: https://www.browsersync.io/docs/gulp/

需要监听任务只需要打开命令行,输入gulp即可。

实践了一番:使用SASS和JS压缩命令行。

// 
var browserify = require('browserify');  
var gulp = require('gulp');
var browserify = require('gulp-browserify');
var uglify = require('gulp-uglify');  
var browserSync = require('browser-sync').create();
var sass = require('gulp-sass');
var reload = browserSync.reload;
var config = {  
    baseDir: 'app',  
    watchFiles: [ 'app/*.html', 'app/css/*.css', 'app/js/*.js' ]
}
gulp.task('server',['sass'], function() {  
    browserSync.init({    
        files: config.watchFiles,    
        server: {      
            baseDir: config.baseDir
        }
    });
gulp.watch("app/scss/*.scss", ['sass']); 
gulp.watch("app/script/*.js", ['js-watch']); 
gulp.watch("app/*.html").on('change', reload);
})
// scss编译后的css将注入到浏览器里实现更新
gulp.task('sass', function() {    
    return gulp.src("app/scss/*.scss")
        .pipe(sass())
        .pipe(gulp.dest("app/css"))
        .pipe(reload({stream: true}));
});
// 处理完JS文件后返回流
gulp.task('js', function () {    return gulp.src('app/script/*.js')
        .pipe(browserify())
        .pipe(uglify())
        .pipe(gulp.dest('app/js'));
});
// 创建一个任务确保JS任务完成之前能够继续响应
// 浏览器重载
gulp.task('js-watch', ['js'], browserSync.reload);gulp.task('default',['server']); 
//定义默认任务

package.JSON如下:

{
    "name": "gulp",  
    "version": "1.0.0",  
    "description": "",  
    "main": "index.js",  
    "dependencies": {    
        "browser-sync": "~2.12.9"
      },
    "devDependencies": {    
        "gulp": "^3.9.1",    
        "gulp-sass": "^2.3.1",    
        "gulp-uglify": "^1.5.3",    
        "gulp-browserify": "^0.5.1"
    },  
    "scripts": {    
        "test": "echo \"Error: no test specified\" && exit 1"
    },  
    "author": "caibaojian",  
    "license": "ISC"
}

目录结构

有需要可以拿去用一下,后面考虑加入图片压缩等。

原文链接:browser-sync gulp配置 版权所有,转载时请注明出处,违者必究。 注明出处格式:前端开发博客 (http://caibaojian.com/browsersync-gulp.html)