gulp创建目录
最后更新于：2022-04-02 05:32:13
## 前言
项目开始阶段，一个最重要的工作就是创建工程化标准目录并且初始化文件。我们基于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('初始化项目目录完成')
})
~~~
';