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  // 设置访问的端口号    });});

使用代理的方式需要注意，本地服务器不能是编辑器内置的服务器，只能是自己搭建的服务器，否则会无法访问。