要领一
运用Google Chrome DevTools
要领二
事情区Browsersync
- 装置 Node.js
BrowserSync是基于Node.js的, 是一个Node模块， 假如您想要疾速运用它，或许您须要先装置一下Node.js 装置适用于Mac OS，Windows和Linux。
- 装置 BrowserSync您可以挑选从Node.js的包治理（NPM）库中 装置BrowserSync。翻开一个终端窗口，运转以下敕令：npm install -g browser-sync您通知包治理器下载BrowserSync文件，并在全局下装置它们，您可以在一切项目(任何目次)中运用。固然您也可以连系gulpjs或gruntjs构建东西来运用，在您须要构建的项目里运转下面的敕令:
npm install --save-dev browser-sync
- 启动 BrowserSync
一个基础用处是，假如您只愿望在对某个css文件举行修正后会同步到浏览器里。那末您只须要运转敕令行东西，进入到该项目（目次）下，并运转相应的敕令：静态网站
假如您想要监听.css文件, 您须要运用服务器形式。 BrowserSync 将启动一个小型服务器，并供应一个URL来查看您的网站。
// –files 途径是相对于运转该敕令的项目（目次）
browser-sync start --server --files "css/*.css"假如您须要监听多个范例的文件，您只须要用逗号离隔。比方我们再到场一个.html文件
// –files 途径是相对于运转该敕令的项目（目次）
browser-sync start –server –files “css/.css, .html”// 假如你的文件层级比较深，您可以斟酌运用 **（示意恣意目次）婚配，恣意目次下恣意.css 或 .html文件。
browser-sync start –server –files “/.css, /.html”
// 监听css文件
browser-sync start –server –files “css/*.css”// 监听css和html文件
browser-sync start –server –files “css/.css, .html”动态网站
假如您已经有其他当地服务器环境PHP或相似的，您须要运用代办形式。 BrowserSync将经由过程代办URL(localhost:3000)来查看您的网站。
// 主机名可以是ip或域名
browser-sync start –proxy “主机名” “css/*.css”
在当地建立了一个PHP服务器环境，并经由过程绑定Browsersync.cn来访问当地服务器，运用以下敕令体式格局，Browsersync将供应一个新的地点localhost:3000来访问Browsersync.cn，并监听其css目次下的一切css文件。
browser-sync start –proxy “Browsersync.cn” “css/*.css”
Browsersync + Gulp.js
Browsersync + Gulp.js
当您在运用gulp构建您的项目时，您只须要 require Browsersync 模块, 应用API 并举行 选项设置。 以下是一些盛行项目中常见的用例， 如 谷歌的收集入门套件 和其他项目。装置^ TOP
起首，您须要装置 Browsersync 和 依靠包 Gulp 。假如你是第一次装置，那末你可以经由过程–save-dev敕令，这将会自动在你的package.json里增加依靠，下一次再装置时，你只须要npm install
$ npm install browser-sync gulp –save-dev
然后，在您的 gulpfile.js 文件里运用它们。
var gulp = require(‘gulp’);
var browserSync = require(‘browser-sync’).create();
// 静态服务器
gulp.task(‘browser-sync’, function() {
browserSync.init({
server: {
baseDir: “./”
}
});
});
// 代办
gulp.task(‘browser-sync’, function() {
browserSync.init({
proxy: “你的域名或IP”
});
});SASS + CSS 注入^ TOP
经由过程流的体式格局建立使命流程, 如许您就可以在您的使命完成后挪用reload，一切的浏览器将被示知的变化并及时更新. 由于Browsersync只在乎您的CSS在编译完成 finished 后 – 注重： gulp.dest 后挪用重载。
var gulp = require(‘gulp’);
var browserSync = require(‘browser-sync’).create();
var sass = require(‘gulp-sass’);
var reload = browserSync.reload;
// 静态服务器 + 监听 scss/html 文件
gulp.task(‘serve’, [‘sass’], function() {
browserSync.init({
server: “./app”
});
gulp.watch(“app/scss/*.scss”, [‘sass’]);
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}));
});
gulp.task(‘default’, [‘serve’]);SASS & Source Maps^ TOP
假如您运用 gulp-ruby-sass 与 sourcemap: true 选项, 将会天生.map 文件. 这些文件终究会被送到下流，在 browserSync.reload() 时吸收它们, 它会尝试从新加载页面 (由于它不会在DOM里发明在任何 .map 文件)。
要处置惩罚这个题目, 您可以运用 gulp-filter 包， 以确保只要 *.css 文件相应 .reload – 如许一来，您照样会获得CSS注入，而不是全部页面重载。
var gulp = require(“gulp”);
var sass = require(“gulp-ruby-sass”);
var filter = require(‘gulp-filter’);
var browserSync = require(“browser-sync”).create();
// 静态服务器 + 监听 scss/html 文件
gulp.task(‘serve’, [‘sass’], function() {
browserSync.init({
server: “./app”
});
gulp.watch(“app/scss/*.scss”, [‘sass’]);
gulp.watch(“app/*.html”).on(‘change’, reload);
});
gulp.task(‘sass’, function () {
return gulp.src(‘scss/*/.scss’)
.pipe(sass({sourcemap: true}))
.pipe(gulp.dest(‘css’))// Write the CSS & Source maps
.pipe(filter(‘*/.css’)) // Filtering stream to only css files
.pipe(browserSync.reload({stream:true}));
});浏览器重载^ TOP
有时候，您可以只是想完整从新加载页面 (比方，处置惩罚一堆JS文件后), 但您愿望在使命发生后重载。这将在 gulp 4.x.x 时变得更轻易, 但现在您可以做到以下几点： (确保您 return 从您的事情流 ，以确保 browserSync.reload() 被挪用在准确的时候。
// 处置惩罚完JS文件后返回流
gulp.task(‘js’, function () {
return gulp.src(‘js/*js’)
.pipe(browserify())
.pipe(uglify())
.pipe(gulp.dest(‘dist/js’));
});
// 建立一个使命确保JS使命完成之前可以继承相应// 浏览器重载
gulp.task(‘js-watch’, [‘js’], browserSync.reload);
// 运用默许使命启动Browsersync，监听JS文件
gulp.task(‘serve’, [‘js’], function () {
// 从这个项目的根目次启动服务器
browserSync({
server: {
baseDir: “./”
}
});
// 增加 browserSync.reload 到使命行列里
// 一切的浏览器重载后使命完成。
gulp.watch(“js/*.js”, [‘js-watch’]);
});手动重载^ TOP
假如流支撑并不满足您的需求，您可以经由过程建立一个使命来手动触发重载要领。我们建立了一个sass使命,在我们修正文件后会在浏览器里注入CSS，然则当HTML文件被更改时，浏览器将会被从新加载（手动重载）。
// 运用变量援用 reload 要领var reload = browserSync.reload;
// 编译 SASS & 自动注入到浏览器
gulp.task(‘sass’, function () {
return gulp.src(‘scss/styles.scss’)
.pipe(sass({includePaths: [‘scss’]}))
.pipe(gulp.dest(‘css’))
.pipe(reload({stream:true}));
});
// 监听scss和html文件, 当文件发生变化后做些什么！
gulp.task(‘serve’, [‘sass’], function () {
// 从这个项目的根目次启动服务器
browserSync({
server: {
baseDir: “./”
}
});
gulp.watch(“scss/*.scss”, [‘sass’]);
gulp.watch(“*.html”).on(“change”, browserSync.reload);
});
