简介：
gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用她，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率。
gulp是基于Nodejs的自动任务运行器， 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。在实现上，她借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单。通过本文，我们将学习如何使用Gulp来改变开发流程，从而使开发更加快速高效。
gulp 和 grunt 非常类似，但相比于 grunt 的频繁 IO 操作，gulp 的流操作，能更快地更便捷地完成构建工作。
这份配置我把它称作demo测试配置，因为在我工作的时候，经常需要快速出效果或者实现某些功能，你没有时间去自己实现，那么就需要找一些现有的例子或者插件。
不过这些demo或者插件很多时候需要在移动端查看或者启动一个服务器，所以这份配置的任务主要就是启动一个本地服务器，可以在移动端和PC端都同时查看，另外在修改代码的时候还能自动刷新，不用每次都切换应用刷新，特别是移动端，可以省去很多麻烦。
使用jQuery Swiper 仿制的魅族官网大图轮播和导航栏ui布局。图片轮播有个特点：有两个主题，一个白色，一个灰色，切换图片的时候会对应切换主题背景色，具有创意的网站产品介绍banner大图切换实例。
详细代码如下：
gulpfile.js:
var gulp = require('gulp'),
browserSync = require('browser-sync').create();// 启动 browserSync 服务，自己启动server，并且为浏览器实时刷新提供服务gulp.task('browserSync', function() {
browserSync.init({
server: {
baseDir: './'},
files: './demo/**/*',
browser: ["chrome"]
})
})// 默认任务，在命令行输入`gulp`来启动任务gulp.task('default', gulp.parallel('browserSync'))package.json:
{ "name": "gulp-demo", "version": "1.0.0", "description": "", "main": "index.js?1.1.11", "scripts": {"test": "echo \"Error: no test specified\" && exit 1"
}, "author": "", "license": "ISC", "devDependencies": {"browser-sync": "^2.18.12","gulp": "gulpjs/gulp#4.0"
}
}文件夹结构：
XX— |— demo |— gulpfile.js |— package.json
这份配置里只用到了一个插件 browserSync ，这个插件会启动一个localhost服务器，可以自动刷新，并且移动端和PC端同步。
browserSync是一个很强大的插件，这里有一份关于它的中文文档，简单易懂，需要的可以自己查看。另外这里有一个小技巧就是，我们可以直接通过该插件的配置选项去监听文件修改，而不需要使用gulp的watch功能，更加简单。
