gulpfile php,gulp实用配置的介绍与使用

简介：

gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用她，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率。

gulp是基于Nodejs的自动任务运行器， 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。在实现上，她借鉴了Unix操作系统的管道(pipe)思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单。通过本文，我们将学习如何使用Gulp来改变开发流程，从而使开发更加快速高效。

gulp 和 grunt 非常类似，但相比于 grunt 的频繁 IO 操作，gulp 的流操作，能更快地更便捷地完成构建工作。

这份配置我把它称作demo测试配置，因为在我工作的时候，经常需要快速出效果或者实现某些功能，你没有时间去自己实现，那么就需要找一些现有的例子或者插件。

不过这些demo或者插件很多时候需要在移动端查看或者启动一个服务器，所以这份配置的任务主要就是启动一个本地服务器，可以在移动端和PC端都同时查看，另外在修改代码的时候还能自动刷新，不用每次都切换应用刷新，特别是移动端，可以省去很多麻烦。

详细代码如下：

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功能，更加简单。