0. 前言
在我们正常开发过程中，我们写的项目最后都得打包、压缩然后上线，现在，我知道的几个前端自动化构建工具有Webpack、grunt、fls3、gulp等，但是其中最火的是Webpack，它确实比较厉害，但是我不怎么了解，咱们今天说点别的，捂脸，就说这个gulp吧！gulp学习成本很低，而且还简单，没有那么复杂的操作，就那么几步。
timg.jpg
1. 简介
gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；它不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用它，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率。
2. 安装
- 安装node.js （gulp是基于node.js下面运行的）
- 安装gulp
一、全局安装npm install gulp -g
二、本地安装npm install gulp --save-dev
注：1. -g是全局安装 2. --save将保存的配置信息至package.json 3. -dev将它作为你的项目依赖添加到中devDependencies内 4. 由于gulp会自带package.json文件（用于存储项目的元数据） - gulp安装插件（install gulp plugins）
一、静态服务器（gulp-webserver）
二、网页自动刷新（gulp-livereload）
安装命令npm install gulp-livereload gulp-webserver --save-dev
3. gulp任务配置
- 在项目根目录中，创建gulpfile.js文件，用来配置和定义任务（task）
- 编辑gulpfile.js文件
// 引入gulp,基础库
var gulp = require('gulp'),
// 引入gulp插件,网页自动刷新(服务器控制客户端同步刷新)
livereload = require('gulp-livereload'),
// 本地服务器
webserver = require('gulp-webserver');
// 注册任务
gulp.task('webserver',function(){
// 服务器目录
gulp.src('./')
//运行gulp-webserver
.pipe(webserver({
// 启动livereload
livereload : true,
// 服务器启动时自动打开网页
open : true
}));
});
// 监听任务
gulp.task('watch',function(){
// 监听根目录下的所有.html文件
gulp.watch('*.html',['html'])
});
// 默认任务
gulp.task('default',['webserver','watch']);
- 默认执行（在命令行输入）
gulp - 执行特定的任务
gulp webserver
图片.png
4. 结束语
希望我写的文章对你有所帮助，最后，还请各位读者多多关照，谢谢！！！
