web前端项目打包

打包

发布前优化

1. 压缩
2. 合并
3. 增加版本号

打包工具

1. Grunt （自动化构建工具）
2. Gulp （自动化构建工具）
3. WubPack （静态资源打包工具）

Gulp

• 通过定义一个个任务来工作（通常每个任务都需要相应插件支持）
• 把文档通过流的方式操作（减少频繁的IO）

安装

sudo npm install gulp --save-dev

配置

gulpFile

所有任务需要定义在此文件

gulp.task("taskName", callBack())

安装常用插件

gulp-dev:

根据文件内容是否改动生成带哈希码的文件名，则浏览器可根据文件名来判断是否需要向浏览器重新请求还是直接读取缓存

Gulp-dev-replace:

更新index引用（gulp-dev可能更新了文件名但没有更新其引用）

gulp-useref:

通过一些注释去把一系列文件合并成一个文件

依赖

default任务

直接命令行运行gulp就会执行这个任务

要执行特定任务就需在gulp后输入任务名