文章目的

这篇文章带领大家搭建一个基本的开发环境。

gulp、用到的gulpAPI以及插件

gulp是一个前端的自动化工具，个人主观觉得，较之webpack上手简单一些。这里只针对本文所用到的api及插件进行简要说明，更多的可以去看官方文档。

全局安装gulp npm install gulp -g

安装gulp到项目依赖 npm install gulp --save-dev

安装gulp插件以空格隔开 npm install --save-dev gulp-load-plugins gulp-plumber gulp-concat gulp-uglify gulp-less gulp-cssmin gulp-imagemin gulp-connect gulp-server gulp-clean open

api	作用
gulp.task(name,[依赖的task],function(){})	创建一个gulp任务，如不用依赖的任务则可以不填
gulp.src(param:文件路径)	读取文件
pipe(在这里进行你想要的操作)	pipe在英语里是管道的意思在这就是流处理，一个接一个，用这个包起来就可以把处理后的状态传递给下一个pipe
gulp.dest(输出文件夹的路径)	dest即destination目的地文件经过上一次的pipe处理后输出到哪
gulp.watch(文件,进行的task)	监听文件，你想要的操作

插件	作用
gulp-load-plugins	gulp使用插件的入口
gulp-plumber	即使检测到语法错误也继续完成编译
gulp-concat	合并文件
gulp-uglify	混淆压缩处理js
gulp-less	编译less
gulp-cssmin	压缩处理css
gulp-imagemin	压缩图片
gulp-connect	这是个多功能插件，首先connect是一个对象它有reload()方法和server()方法
server({root:路径,livereload:boolean,port:端口})	启动服务器，我们这里给它进行了必要的路径配置和端口配置,livereload:是否启动实时刷新
gulp-clean	恢复到编译之前的状态
open	使用默认浏览器打开网址