通过Gulp使用Browsersync实现浏览器实时响应文件更改
2016-08-17 01:32
465 查看
Gulp是什么鬼
Browsersync又是什么鬼
如何安装使用Browsersync
安装
使用
效果图
参考
Gulp的安装及基本使用,可参考一点| gulp详细入门教程,写得十分6,通俗易懂
而且可以在多个浏览器、多个设备(PC、平板、手机等)下同时进行调试,是提高开发效率的利器
2.在本地项目目录下安装,同时装一下gulp跟gulp的插件(如果有用到gulp插件的话,比如gulp-less)
在项目根目录底下新建文件gulpfile.js,然后填入内容:
2.运行gulp
在项目根目录命令行执行
项目启动后在命令行中会输出Access URLs,包括本地跟外部访问的URL以及项目跟UI控制界面的URL
项目默认启动在http://localhost:3000
UI控制界面默认启动在http://localhost:3001
Browsersync + Gulp.js
Browsersync又是什么鬼
如何安装使用Browsersync
安装
使用
效果图
参考
Gulp是什么鬼
Gulp是一种基于node.js的构建工具,有关构建工具的概念请移步什么是构建工具Gulp的安装及基本使用,可参考一点| gulp详细入门教程,写得十分6,通俗易懂
Browsersync又是什么鬼
Browsersync可以让浏览器实时响应所做的文件更改,包括html, js, css, less, sass等,并自动刷新页面而且可以在多个浏览器、多个设备(PC、平板、手机等)下同时进行调试,是提高开发效率的利器
如何安装使用Browsersync
官网上有各种安装使用方式,这边我用gulp安装
1.全局安装npm install -g browser-sync
2.在本地项目目录下安装,同时装一下gulp跟gulp的插件(如果有用到gulp插件的话,比如gulp-less)
npm install browser-sync --save-dev npm install gulp --save-dev npm install gulp-less --save-dev
使用
1.配置gulpfile.js在项目根目录底下新建文件gulpfile.js,然后填入内容:
//引入gulp、gulp插件以及browser-sync var gulp = require('gulp'), browserSync = require('browser-sync').create(), less = require('gulp-less'); //创建一个新的gulp任务 gulp.task('serve',['less'],function(){ //初始化项目跟目录为'./'(也可以使用代理proxy: "yourlocal.dev") browserSync.init({ server: './' }); //创建gulp监听器,监听less文件的变化,自动执行'less'任务,编译less并生成css文件 gulp.watch('./less/*.less', ['less']).on('change', function(event){ console.log('File ' + event.path + ' was ' + event.type + ', running tasks...'); }); //监听html文件的变化,自动重新载入 gulp.watch('./*.html').on('change', browserSync.reload); }); //创建自动编译less的任务,这边需要return stream以保证browserSync.reload在正确的时机调用 gulp.task('less', function(){ return gulp.src('./less/*.less') .pipe(less()) .pipe(gulp.dest('./css')) .pipe(browserSync.stream()); }); //默认启动的gulp任务数组['serve'] gulp.task('default', ['serve']);
2.运行gulp
在项目根目录命令行执行
gulp或
gulp default
项目启动后在命令行中会输出Access URLs,包括本地跟外部访问的URL以及项目跟UI控制界面的URL
项目默认启动在http://localhost:3000
UI控制界面默认启动在http://localhost:3001
效果图
参考
一点| gulp详细入门教程Browsersync + Gulp.js
相关文章推荐
- JS中使用gulp实现压缩文件及浏览器热加载功能
- java实时向zip中写excel文件并通过浏览器实现下载
- 配置gulpfile文件,实现文件更改后浏览器即时刷新
- 使用gulp实现文件更改自动刷新
- nodejs在线xlsx转json,使用gulp实现文件更改自动刷新
- 使用Servlet实现文件下载的时候,避免浏览器自动打开文件
- 使用jQuery Uploadify借助Dorado平台实现批量上传文件动态显示实时上传文件状态
- 使用csync2+inotify实现文件实时同步
- [转]CENTOS 使用RSYNC+INOTIFY实现文件实时自动同步
- 使用inotify实现实时文件同步shell脚本
- 使用WebRTC实现电脑与手机通过浏览器进行视频通话
- 本文使用c#通过oledb可获取excel文件表的结构信息,同理也可以获得access等数据库的表结构信息,实现如下:
- 使用Servlet实现文件下载的时候,避免浏览器自动打开文件
- 通过p12文件实现证书的多次使用
- 使用WebRTC实现电脑与手机通过浏览器进行视频通话
- 通过更改字库文件组件及相关设置实现对NK进行裁剪(尤其适用中文简体系统)
- 通过FF、chrom浏览器使用swfupload上传文件出现404错误的解决办法
- 使用Servlet实现文件下载的时候,避免浏览器自动打开文件
- 通过终端命令行进行WebDav服务器配置,实现使用PUT进行文件上传【图文详解】