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