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。

• exercise

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

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