## 前言 項目開始階段，一個最重要的工作就是創建工程化標準目錄并且初始化文件。我們基于gulp給大家擬定了一個簡單的方式來初始化。 ### 標準化目錄 * 根據我們目前的項目架構以及業務，我們將初步的前端工程化目錄調整為下面的結構，其中三級目錄根據自己的需求靈活增刪。  ### 初始化目錄結構 * 前提你的gulp的準備工作已經完善，并且項目根目錄下有對應的模塊依賴載入。那么你可以進行目錄的初始化了。如果前端團隊內已經搭建好了基本的項目結構，可以把這個發布為模塊，以供其他項目引入這個核心模塊，完成基本的配置。 * 需要的工具模塊 ~~~ var mkdirp = require('mkdirp'); var fs = require('fs'); ~~~ * 可能的初始化目錄以及文件 ~~~ var moduledir={ srcPages:'./src/pages/', srcJS : './src/js/', //JS生產目錄 srcLess : './src/less/', //less源文件目錄 srcCss :'./src/css/', //less源文件目錄 srcCSSbase : './src/less/base', //less源文件目錄 srcCSScomp : './src/less/components', //less源文件目錄 srcCSScomp : './src/less/components', //less源文件目錄 srcCSSmixin : './src/less/base/mixin', //less源文件目錄 srcFont : './src/fonts/', //字體圖標源文件目錄 srcImage : './src/img/', //圖片源文件目錄 libs :'./libs', //生產目錄 test : './test', //生產目錄 doc : './doc', //生產目錄doc dest : './dist' //生產目錄 } var files={ srcCSSbutton : './src/less/components/button.less', //less源 srcCSSinput : './src/less/components/input.less', //less源文件 srcCSScombine : './src/less/style.less', //less源文件目錄 srcCSSvars : './src/less/base/variables.less', //less源文件目錄 srcCSSreset : './src/less/base/reset.less', //less源文件目錄 srcCSSglobal : './src/less/base/global.less', //less源文件目錄 srcCSSgrid : './src/less/base/grid.less', //less源文件目錄 readme : './README.md',//生產目錄 //bowermodule="./dist/lib" //依賴資源文檔的目錄 bowermoduleFile : "./.bowerrc", gitignore : './.gitignore' //生產目錄 } ~~~ * 建立文件任務 ~~~ //初始化目錄結構 gulp.task('initdir', function () { for (let p in moduledir) { mkdirp(moduledir[p], function (err) { if (err) console.error(err); else console.log(moduledir[p] + " was created!"); }); } }) // 初始化基本的文件，根據不同的文件初始化需求去寫入內容或者加載內容 gulp.task('initfiles',function(){ for (let p in files) { var initStr; switch(files[p]) { case "./.gitignore": initStr = "node_modules"; break; case "./.bowerrc": initStr = '{"directory" : "libs"}'; break; default: initStr = ""; break } fs.writeFile(files[p], initStr, function(err) { if(err) { return console.log(err); } else console.log(files[p] + " was saved!"); }) } }) gulp.task('initFileSys',['initdir','initfiles'],function(){ console.log('初始化項目目錄完成') }) ~~~