使用gulp构建项目
1.全局安装gulp
npm install -g gulp
2.创建本地项目并初始化
进入本地项目，运行npm init初始化项目。 初始化时根据需求输入对应的值，不输直接回车就行，最后输入y,生成一个package.json文件（在此文件放需要的插件和对应版本）,初始结构如下：
{
"name": "demo-gulp",
"version": "1.0.0",
"description": "简单的gulp demo",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"gulp": "^4.0.2"
}
}
3.安装常用插件
如果是开发时需要的插件使用--save-dev指令（插入devDependencies中），生成环境也需要的使用--save指令（插入dependencies中）
- gulp-jshint ——js语法检测
- //gulp-util ——终端控制台打印自定义错误信息 (4.0版本已弃用)
- http-proxy-middleware ——设置代理，配合gulp-connect使用
- gulp-less ——将less编译成css
- gulp-file-include ——用于文件模块化导入，如用include的方式导入公共部分
- gulp-connect ——用于启动本地服务器
- gulp-clean ——清理目录
- gulp-uglify --压缩js
- gulp-minify-css ——压缩css
- gulp-autoprefixer ——自动添加浏览器前缀
- imagemin-pngquant ——png图片压缩
- gulp-imagemin ——图片压缩
- gulp-cache ——设置gulp打包的缓存，一般用于img
安装命令如下：
npm install gulp jshint gulp-jshint gulp-util http-proxy-middleware gulp-less gulp-file-include gulp-connect gulp-clean gulp-uglify gulp-minify-css gulp-autoprefixer imagemin-pngquant gulp-imagemin gulp-cache --save-dev
4.项目配置文件（gulpfile.js）
在控制台输入gulp的时候首先执行gulpfile.js文件，在执行default任务，所以建一个名为gulpfile.js的js文件，将任务写在里面。
由于我们要区分开发环境和生产环境，所以使用两个不同的配置文件，配置文件统一放在build文件下。 结构如下：
- build 配置文件存储目录
- config.prod.js 生产环境公共配置文件
- config.dev.js 开发环境公共配置文件
- gulp.dev.js 开发环境配置文件
- gulp.prod.js 生产环境配置文件
- gulpfile.js
具体配置信息见：build中
5.项目整体结构如下
- build 配置文件存储目录
- config.prod.js 生产环境公共配置文件
- config.dev.js 开发环境公共配置文件
- gulp.dev.js 开发环境配置文件
- gulp.prod.js 生产环境配置文件
- dist 编译后文件存储目录
- src 项目开发文件目录
- scss/sass/less/css
- js
- images
- fonts
- views
- package.json 项目描述及安装包
- gulpfile.js 运行时的配置文件
