tmt-workflow/
│
├── _tasks //Gulp 任務定義
├── package.json
├── .tmtworkflowrc //工作流配置文件
└── project //項目目錄
├── gulpfile.js //任務配置,每個項目必需
├── dev //開發(fā)目錄,由 build_dev 任務自動生成
│ ├── css
│ ├── html
│ ├── img
│ └── slice
├── dist //生產目錄(存放最終可發(fā)布上線的文件),由 build_dist 任務自動生成
│ ├── css
│ ├── html
│ ├── img
│ └── sprite //雪碧圖合并自 src/slice,文件名與 css 文件名一致
│ ├── style-index.png
│ └── style-index@2x.png
└── src //源文件目錄,此目錄會被監(jiān)聽變化并重新編譯->dev
├── css //樣式表目錄,使用 Less,只有 style-*.less 的文件名會被編譯
├── html
├── img
└── slice //圖片素材,雪碧圖合并,同名的 @2x 圖片會被識別并進行合并
├── icon-dribbble.png
├── icon-dribbble@2x.png
如上,在我們日常開發(fā)當中,把所有項目都統(tǒng)一存放在一個目錄,如可以叫 tmt-workflow
, 目錄下固定的有 _tasks
目錄、package.json
和 .tmtworkflowrc
,這幾個是工作流必需的。
npm install
時用接著就是各個項目(project)了,一個標準的項目結構如下:
── project //項目目錄
├── gulpfile.js //任務配置,每個項目必需
└── src //源文件目錄,此目錄會被監(jiān)聽變化并重新編譯->dev
├── css //樣式表目錄,使用 Less,只有 style-*.less 的文件名會被編譯
├── html
├── img
└── slice //圖片素材,雪碧圖合并,同名的 @2x 圖片會被識別并進行合并
├── icon-dribbble.png
├── icon-dribbble@2x.png
注意:標準的項目結構只有如上所示,
build_dev
和build_dist
為程序自動生成。
更多建議: