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

在项目根目录命令行执行gulpgulp default

项目启动后在命令行中会输出Access URLs,包括本地跟外部访问的URL以及项目跟UI控制界面的URL

项目默认启动在http://localhost:3000

UI控制界面默认启动在http://localhost:3001

效果图

参考

一点| gulp详细入门教程

Browsersync + Gulp.js

通过Gulp使用Browsersync实现浏览器实时响应文件更改的更多相关文章

  1. 使用gulp和browser-sync实现浏览器自动刷新

    安装gulp (前提是已经安装了node) 全局安装: npm install -g gulp 本项目安装: npm install gulp --save-dev 安装browser-sync 全局 ...

  2. 使用gulp 合并压缩打包,实时监控文件,实现本地server

    今天不讲webpack,就说说gulp是怎么进行压缩合并打包 首先你的安装gulp : npm install gulp -g --save-dev 然后最基本的你因该知道gulp 的四个方法, gu ...

  3. BrowserSync:跨浏览器实时同步预览

    BrowserSync:跨浏览器实时同步预览 2016.09.11 官方网站:https://www.browsersync.io/ 项目仓库:https://github.com/Browsersy ...

  4. gulp之压缩css,less转css,浏览器实时刷新【原创】

    gulp入门 gulp浏览器实时同步 首先要下载对应的插件包: gulp-less包:cnpm install gulp-less --save-dev gulp-connect包:cnpm inst ...

  5. 用redis的订阅发布解决了扫码支付实时响应的问题

    一.场景描述: PC收银台的浏览器展示了收款二维码,用户扫了支付二维码,支付完成后,浏览器需要实时响应支付结果. 二.问题描述: 扫码支付的支付结果一般通过服务端回调和主动查询来获取,显示二维码之后, ...

  6. react实例之todo,做一个实时响应的列表操作

    react实例之todo, 做一个实时响应的列表操作 在所有的mvc框架中,最常见的例子不是hello world,而是todo,由于reactjs的简单性,在不引用flux和redux的情况下,我们 ...

  7. 分享Grunt.js配置: watch + liveReload 实时监测文件变化自动刷新浏览器

    http://www.tuicool.com/articles/2eaQJn 用Grunt配置watch和liveReload组件,可以实时检测指定的文件变化并自动刷新浏览器.目前基本已经成为了我的必 ...

  8. webpack-dev-server 搭建本地服务以及浏览器实时刷新

    一.概述开发项目中为了保证上线,开发项目是都需要使用localhost进行开发,以前的做法就是本地搭建Apache或者Tomcat服务器.有的前端开发人员 对服务器的搭建和配置并不熟悉,这个时候需要后 ...

  9. IE浏览器支持响应式网站设计

    目前响应式网站设计比较流行, 下面是摘自百度百科有关响应式设计的定义. 响应式网站设计是一种网络页面设计布局,其理念是:集中创建页面的图片排版大小,可以智能地根据用户行为以及使用的设备环境进行相对应的 ...

随机推荐

  1. oracle数据库_实例_用户_表空间之间的关系(转)

    数据库:Oracle数据库是数据的物理存储.这就包括(数据文件ORA或者DBF.控制文件.联机日志.参数文件).其实Oracle数据库的概念和其它数据库不一样,这里的数据库是一个操作系统只有一个库.可 ...

  2. 最大公共字串LCS问题(阿里巴巴)

    给定两个串,均由最小字母组成.求这两个串的最大公共字串LCS(Longest Common Substring). 使用动态规划解决. #include <iostream> #inclu ...

  3. [Machine Learning] Learning to rank算法简介

    声明:以下内容根据潘的博客和crackcell's dustbin进行整理,尊重原著,向两位作者致谢! 1 现有的排序模型 排序(Ranking)一直是信息检索的核心研究问题,有大量的成熟的方法,主要 ...

  4. pathinfo()、dirname()、basename()获得文件的路径,名称等信息说明

    在PHP中,若想通过函数获得一个文件的路径.名称,或者是扩展名等,是非常容易的一件事.可以使用dirname().basename().pathinfo()等多种途径获得相应的信息. 假设现在有一个图 ...

  5. C和指针 第十一章 动态内存分配

    声明数组时,必须指定数组长度,才可以编译,但是如果需要在运行时,指定数组的长度的话,那么就需要动态的分配内存. C函数库stdlib.h提供了两个函数,malloc和free,分别用于执行动态内存分配 ...

  6. C/C++内存、指针问题

    转 http://wenku.baidu.com/link?url=tN9Fac-XyB2F7V7xwYcRclu464G2c8ybYMBxNXbBGQJXEEy0vJxTOzcAeVrFrqYLfj ...

  7. Google疯了,竟然这样!

    导读 一个小问题:你每天做什么事?当然了,好多事情,但是我可以指出一件事,你几乎每天都会用 Google 搜索,我说的对吗?现在,如果你是一位 Linux 用户,这里有另外一个问题:如果你甚至不用离开 ...

  8. Qt应用程序图标设置

    Qt应用程序图标设置 本文仅仅适用于windows下,linux等不适用. 下面说的图标,指的是程序文件的图标,而不是托盘图标或者说运行时任务栏的图标(任务栏和程序窗口的图标在windows/linu ...

  9. linux 配置ssh免密码登陆本机

    1.安装 sudo apt-get install ssh 2.配置无密码登录 ssh-keygen -t rsa 遇到停顿按回车即可 进入/home/zeze/.ssh目录(隐藏目录,在winSCP ...

  10. PHP程序员进阶学习书籍参考指南

    PHP程序员进阶学习书籍参考指南 @heiyeluren lastmodify: 2016/2/18     [初阶](基础知识及入门)   01. <PHP与MySQL程序设计(第4版)> ...