gulp+browser-sync使用方法

本文主要是介绍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有两种使用方式，架设静态服务器或者使用代理。

1. 安装准备

   $ 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

• 设置任务---架设静态服务器的方法

  // 安装依赖
  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使用方法的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---