gulp+browser-sync使用方法
gulp简介
gulp是基于流的自动化构建工具,也就是说gulp是通过操作流实现自动编译,压缩文件等操作的。这得益于node.js对流的支持,当然gulp.js和构建的任务文件都是JavaScript编写的。
安装方法:
$ npm install -g gulp //全局安装
$ npm install --save-dev gulp //本地安装,只是开发版的依赖
设置自动化任务:
创建一个gulpfile.js文件,这个文件里面放置我们要设置的任务。文件里的代码大概是这个样子的。
// 模块引用
var gulp = require('gulp');
//设置任务
gulp.task('task1',function () {
console.log('task1 is completed!');
});
然后我们在控制台执行任务
$ gulp task1
// 打印结果如下
[20:45:22] Using gulpfile E:\apersonal-project\exercise\gulpfile.js
[20:45:22] Starting 'task1'...
task1 is completed!
[20:45:22] Finished 'task1' after 267 μs
我们刚刚执行完task1任务,这个任务只是打印了一句话。gulp有丰富的插件库 ,我们可以使用上面的插件实现我们想要的功能。
browser-sync介绍
browser-sync是一个十分好用的浏览器同步测试工具。
优点:
1、它能监听文件的更改并且自动刷新页面,节省了调试页面的时间,尤其是做移动端的响应式开发的时候;
2、CSS动态注入,不用刷新整个页面,想想做单页应用时,如果有链式动画的话,有了这个神器会有多爽;
3、可以架设静态服务器,如果我们有本地服务器,它也支持使用代理的方式。
guop+browser-sync使用方法
browser-sync并不算是gulp的一个插件,但是通过gulp可以直接使用browser-sync。
browser-sync有两种使用方式,架设静态服务器或者使用代理。
- 安装准备
$ npm install -g gulp //全局安装
$ npm install --save-dev gulp //本地安装,只是开发版的依赖
// 安装插件
$ npm install --save-dev browser-sync
2、设置gulpfile.js文件
这里先说一下例子中的目录结构,根目录是exercise,里面有一个blink文件夹和gulpfile.js文件,blink文件夹下有一个blink.html。
[X] exercise
- [x] blink
- [x] blink.html
- [x] gulpfile.js
- [x] blink
设置任务---架设静态服务器的方法
// 安装依赖
var gulp = require('gulp'),
browserSync = require('browser-sync');
// 设置任务---架设静态服务器
gulp.task('browser-sync', function () {
browserSync.init({
files:['**'],
server:{
baseDir:'./', // 设置服务器的根目录
index:'blink/blink.html' // 指定默认打开的文件
},
port:8050 // 指定访问服务器的端口号
});
});
最后执行任务,浏览器会自动打开blink.html页面,而且当你更改blink.html页面内容时,无需手动刷新,页面会自动更新。
$ gulp browser-sync
效果图
- 设置任务---使用代理、
// 安装依赖
var gulp = require('gulp'),
browserSync = require('browser-sync');
// 设置任务---使用代理
gulp.task('browser-sync', function () {
browserSync.init({
files:['**'],
proxy:'localhost', // 设置本地服务器的地址
port:8080 // 设置访问的端口号
});
});
使用代理的方式需要注意,本地服务器不能是编辑器内置的服务器,只能是自己搭建的服务器,否则会无法访问。
gulp+browser-sync使用方法的更多相关文章
- web页面实时刷新之browser sync
web开发对实时刷新的需求 在刚开始学习前端时每次修改文件内容后都需要手工刷新下浏览器来看效果,做的次数多了就特别难受,有时仅仅修改了一个字母都需要刷新下页面查看 之后接触到编写边看的集成IDE,文件 ...
- nodejs编译sass模块包 node-compass,与gulp包gulp-sass使用方法
简介:node express或者就是node项目中,要自动编译sass方法很多,比如gulp 比如考拉,比如今天我想说的这个包node-compass. 编译sass的三种方法: 前提条件: 都需要 ...
- [转载]jQuery 1.9 移除了 $.browser 的替代方法获取浏览器类型
jQuery 从 1.9 版开始,移除了 $.browser 和 $.browser.version , 取而代之的是 $.support . 在更新的 2.0 版本中,将不再支持 IE 6/7/8. ...
- jQuery 1.9 移除了 $.browser 的替代方法
jQuery 从 1.9 版开始,移除了 $.browser 和 $.browser.version , 取而代之的是 $.support . 在更新的 2.0 版本中,将不再支持 IE 6/7/8. ...
- vscode中执行gulp task的简便方法
本文重点是gulp在vscode中执行task任务的方法 如何像webstorm那样简便操作gulp 的task 第1步:安装node.下载地址:https://nodejs.org/zh-cn/ 检 ...
- jQuery1.9 $.browser 的替代方法
jQuery 从 1.9 版开始,移除了 $.browser 和 $.browser.version , 取而代之的是 $.support . 在更新的 2.0 版本中,将不再支持 IE 6/7/8. ...
- jQuery 1.9使用$.support替代$.browser的使用方法
jQuery 从 1.9 版开始,移除了 $.browser 和 $.browser.version , 取而代之的是 $.support jQuery 从 1.9 版开始,移除了 $.browser ...
- gulp脚本编写方法
建立一个gulpfile.js文件,内容直接抄gulp-htmlmin的readme: var gulp = require('gulp'); var htmlmin = require('gulp- ...
- Gulp 方法
Gulp有5个基本方法:src.dest.task.run.watch Gulp.src() gulp模块的src方法,用于产生数据流.它的参数表示索要处理的文件,一般有以下几种形式: js ...
- gulp的使用以及Gulp新手入门教程
Gulp新手入门教程 原文 http://w3ctrain.com/2015/12/22/gulp-for-beginners/ Gulp 是一个自动化工具,前端开发者可以使用它来处理常见任务: 搭 ...
随机推荐
- 歪国人DIY的MINI四轴
歪国人DIY的MINI四轴 Crazyflie 2.0 自己仿Crazyflie.CrazyPony
- php短数组写法
在php 5.4+的版本中,可以使用 [] 来表示 array() 例子: // On PHP 5.1 $data = array("foo", "bar" ...
- 关于js中window.location.href,location.href,parent.location.href,top.location.href用法
"window.location.href"."location.href"是本页面跳转 "parent.location.href"是上一 ...
- 基于jquery 封装的 select 小控件,解决 IE6 7 8里 select 边框 高度 无法遮挡等问题
一.基本原理 select控件在浏览器中是个永远的痛,不同的版本解析出来的可谓五花八门.主要有以下问题: 1,IE6中无法设置高度,Z INDEX永远在最上,无法被其它层遮挡 2,IE7中可以设置高度 ...
- Delphi中上指定进程(进程名)
procedure KillProcess(ExeName: string); const PROCESS_TERMINATE = $0001; //进程的PROCESS_TERMINATE访问权限 ...
- js原生设计模式——7原型模式之new+call(this)组合应用再探讨实例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- jQuery软键盘插件
1.html: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.or ...
- HDU-1754-I Hate It(线段树,简单,不过好像有点问题)
题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=1754 题目不难,不过开始我犯了一个低级错误,输入n,m,m代表操作的数目,我没有写了,写代码的时候,就 ...
- MyBatis 使用foreach与其他方式的时候参数传递方式
Mapper文件: <select id="selectPersonByIds" parameterType="map" resultMap=" ...
- Spring context:component-scan中使用context:include-filter和context:exclude-filter
Spring context:component-scan中使用context:include-filter和context:exclude-filter XML: <?xml version= ...