目錄結構介紹


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 為程式自動產生。