美文网首页
js自动创建对应目录文件夹

js自动创建对应目录文件夹

作者: Benny_lzb | 来源:发表于2019-09-27 19:27 被阅读0次

项目中,因为要建views相对应的styles和scripts文件,由于懒..所以问了下度娘然后写了个符合自己需求的创建目录文件功能

效果图


创建home中的index.vue.png
image.png image.png
主要操作就是,建好view里头所有的视图文件,然后node执行以下代码的js文件,就会相对应生成styles和script文件

/**
 * @author: Benny
 * @description: 测试测试 自动创建文件
 * @param {type} 
 */
let fs = require('fs')
let path = require('path')


/**
 * @author: Benny
 * @description: 读取目录文件
 * @param {dir} 指定读取目录路径 
 */
function readFileList(dir,filesList = []){
    const files = fs.readdirSync(dir);
    files.forEach((item, index) => {
        var fullPath = path.join(dir, item);
        const stat = fs.statSync(fullPath);
        // console.log(path.dirname(fullPath))
        if (stat.isDirectory()) { //如果当前是文件目录     
            readFileList(path.join(dir, item), filesList);  //递归读取文件
        } else {                
            filesList.push(fullPath);                     
        }        
    });
    return filesList;
}

/**
 * @author: Benny
 * @description:递归创建目录 异步方法  
 * @param {dirname} 文件夹名称
 */
function mkdirs(dirname, callback) {  
    fs.exists(dirname, function (exists) {  
        if (exists) {  
            // 是个目录则执行callback方法
            callback();  
        } else { 
            // 递归调用mkdirs
            /*console.log(dirname);  
            console.log(path.dirname(dirname)); */ 
            mkdirs(path.dirname(dirname), function () {  
                fs.mkdir(dirname, callback);  
                console.log('在' + path.dirname(dirname) + '目录创建好' + dirname  +'目录');
            });  
        }  
    });  
} 

/**
 * @author: Benny
 * @description: 创建文件
 * @param {filename}  文件路径+名字
 */
function makeFiles(filename,content){
    fs.writeFile(filename,content,function (err) {
        if(err){
            console.log("error");
            return;
        }
        console.log(`创建${filename}成功`);

    })
}

let filesList = readFileList('src/views')
let jsTemplate = `export default {
    data() {
        return {

        }
    },
    created() {
        
    },
}`
let newList = []
filesList.forEach((item)=>{
    let jsItem = item.replace(/views/g,'scripts');
    newList.push(jsItem)
    let cssItem = item.replace(/views/g,'styles');
    newList.push(cssItem)

})

newList.forEach((item)=>{
    let dir = path.parse(item).dir //文件夹路径
    let filename = path.parse(item).name.replace(/^\_([A-Z])/g,function(str){
        return str.toLowerCase().replace(/\_/g,'')
    }) //文件名称
    let newFileNamePath;
    //包含style且排除block
    // if(dir.indexOf('styles')>0 && dir.indexOf('block') == -1 ){
    if(dir.indexOf('styles')>0){
        newFileNamePath = `${dir}/${filename}.less`
        mkdirs(dir,(data)=>{
            //如果文件已存在
            if(fs.existsSync(newFileNamePath)){
                console.log('已存在')
            }else{
                //生成文件
                makeFiles(newFileNamePath,'')
            }
        })
    }

    if(dir.indexOf('scripts')>0){
        newFileNamePath = `${dir}/${filename}.js`
        mkdirs(dir,(data)=>{
            //如果文件已存在
            if(fs.existsSync(newFileNamePath)){
                console.log('已存在')
            }else{
                //生成文件
                makeFiles(newFileNamePath,jsTemplate)
            }
        })
    }
 
})








相关文章

  • js自动创建对应目录文件夹

    项目中,因为要建views相对应的styles和scripts文件,由于懒..所以问了下度娘然后写了个符合自己需求...

  • Plop

    介绍: 创建项目中特定类型的文件的工具 每创建一个文件夹 对应自动生成3个文件 js css html 1. 使用...

  • 小程序开发技巧-model概念

    引入模型models概念 1.根目录下创建models文件夹 2.根据page创建对应的js文件 3.使用回调函数...

  • 利用Go搭建web服务器

    在GOPATH的src目录下创建文件夹staticweb文件夹,对应的目录结构 创建相应的文件夹,编辑webser...

  • 小程序组件化开发 传值

    创建新组件 1、在根目录创建components文件夹2、创建对应页面的子文件夹 (例: indexpage---...

  • Mock.js安装与语法(一)

    Mock.js安装与语法 一. mock.js 创建相应的demo工程 在创建工程的目录文件夹下创建相应工程目录,...

  • 封装axios

    安装axios 根目录下创建api文件夹,在api文件夹下创建network.js和index.js文件: 在ne...

  • gulp

    1 环境 根目录下 创建 gulpfile.js 或 gulpfile文件夹(文件夹时默认使用 index.js)...

  • 2019-12-30

    创建一个vue.config.js 文件夹 要在根目录

  • ES6项目构建-2(1)

    项目构建的目录—创建文件夹 1.文件夹 app 前端代码 js class index.js 入口文件 css...

网友评论

      本文标题:js自动创建对应目录文件夹

      本文链接:https://www.haomeiwen.com/subject/gpeauctx.html