目錄結構介紹
tmt-workflow/ │ ├── _tasks //Gulp 任务定义├── package.json ├── .tmtworkflowrc //工作流配置文件└── project //项目目录 ├── gulpfile.js //任务配置,每个项目必需 ├── dev //开发目录,由 build_dev 任务自动生成 │ ├── css │ ├── html │ ├── img │ └── slice ├── dist //生产目录(存放最终可发布上线的文件),由 build_dist 任务自动生成 │ ├── css │ ├── html │ ├── img │ └── sprite //雪碧图合并自 src/slice,文件名与 css 文件名一致 │ ├── style-index.png │ └── style-index@2x.png └── src //源文件目录,此目录会被监听变化并重新编译->dev ├── css //样式表目录,使用 Less,只有 style-*.less 的文件名会被编译 ├── html ├── img └── slice //图片素材,雪碧图合并,同名的 @2x 图片会被识别并进行合并 ├── icon-dribbble.png ├── icon-dribbble@2x.png
如上,在我們日常開發當中,把所有項目都統一存放在一個目錄,如可以叫 tmt-workflow
, 目錄下固定的有 #_tasks
目錄、package.json
和 .tmtworkflowrc
,這幾個是工作流程必需的。
- _tasks: 存放Gulp 程式碼的目錄
- package.json: 模組依賴文件,用於
npm install
時用 - .tmtworkflowrc : 工作流程全域設定文件,如果想有項目想特殊化,可在專案裡面再建一個同名文件覆蓋,更詳細查看 ⒊ 設定檔
接著就是各個項目(project)了,一個標準的專案結構如下:
── project //项目目录 ├── gulpfile.js //任务配置,每个项目必需 └── src //源文件目录,此目录会被监听变化并重新编译->dev ├── css //样式表目录,使用 Less,只有 style-*.less 的文件名会被编译 ├── html ├── img └── slice //图片素材,雪碧图合并,同名的 @2x 图片会被识别并进行合并 ├── icon-dribbble.png ├── icon-dribbble@2x.png
注意:標準的專案結構只有如上所示,
build_dev
和build_dist
為程式自動產生。