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是一个十分好用的浏览器同步测试工具。

优势：

一、它能监听文件的更改而且自动刷新页面，节省了调试页面的时间，尤为是作移动端的响应式开发的时候；
二、CSS动态注入，不用刷新整个页面，想一想作单页应用时，若是有链式动画的话，有了这个神器会有多爽；
三、能够架设静态服务器，若是咱们有本地服务器，它也支持使用代理的方式。

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

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

使用代理的方式须要注意，本地服务器不能是编辑器内置的服务器，只能是本身搭建的服务器，不然会没法访问。