gulp之纯静态项目打包脚手架（版本控制修改）

Gulp 打包静态页面

• 兼容 ie9+、Edge、Chrome、FireFox、Opera、Safari
• 使用 gulp@3.9.0、Bootstrap@3.3.7、sass、vue.js(静态资源方式引入) 架构

GitHub: github.com/wdwlbsmlw/G…

Project setup

1 install

npm install
or
yarn
复制代码

2 Edit node_modules

对插件进行如下修改，使得引用资源文件的url得以如下变换：
*  "/css/base-f7e3192318.css" >> "/css/base.css?v=f7e3192318"

gulp-rev 9.0.0
135 
manifest[originalFile] = revisionedFile;
manifest[originalFile] = originalFile + '?v=' + file.revHash;

rev-path 2.0.0
9
return modifyFilename(pth, (filename, ext) => `${filename}-${hash}${ext}`);
return modifyFilename(pth, (filename, ext) => `${filename}${ext}`);

gulp-rev-collector 1.3.1
41
if ( ...
if ( path.basename(json[key]).split('?')[0] !== path.basename(key) ) {
复制代码

3 developer

npm run dev
or
yarn dev
复制代码

4 build

npm run build
or
yarn build
复制代码

Project Directory Structure

|-- dist\                                // 打包后目录
|-- node_modules\                        // node 模块安装目录（自动生成，无需修改）
|-- rev\                                 // 资源文件版本号文件（自动生成，无需修改）
|-- src\                                 // 源码
|   |-- components\                      // 公共组件
|       |-- backTop.html                 // 返回顶部
|       |-- footer.html                  // 页脚
|       |-- header.html                  // 导航栏
|   |-- css\                             // css 样式表，由sass编译完成，无需修改
|   |-- img                              // 图片资源
|   |-- include                          // gulp 全局公共代码，通过gulp-file-include组装
|       |-- head.html                    // 公共头部meta标签
|       |-- link.html                    // 公共样式链接
|       |-- script.html                  // 公共脚本链接
|   |-- js                               // js 资源
|   |-- sass                             // sass源码，所有样式在此修改
|   |-- swiper3                          // 第三方库、swiper@3.x
|   |-- template                         // 页面模板
|       |-- index.html                   // 首页
|       |-- ...
|   |-- *.html                           // 组装好的页面
|-- .gitignore                           // 
|-- gulpfile.js                          // Gulp 配置文件（打包任务）
|-- package.json                         // 
|-- README.md                            // 
|-- yarn.lock                            // yarn 模块安装锁定版本文件，统一模块版本
复制代码

转载于:https://juejin.im/post/5cce425ce51d4514df420726