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
设置任务---架设静态服务器的方法

// 安装依赖

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

    });

});

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