貌似很多人都爱用这个作为写文章的初尝试,那来吧。
遍历文件夹下的所有文件,如遍历文件夹下并操作HTML/CSS/JS/PNG/JPG步骤如下:
1、传入一个路径,读取路径里面所有的文件;
2、遍历读取的文件,判断当前文件是文件还是文件夹;
3、if: 前目录为文件,输出当前文件绝对路径,return;
4、else: 当前目录为文件夹,获取文件夹路径,继续递归遍历该文件夹下的文件;
5、直至遍历完目录中的所有文件为止。
常规实现之Code:
import * as fs from 'fs';
import * as path from 'path'; // 导入fs库和path库,哪里来的?npm, yarn了解一下
/**
* @description
* path.resolve(...pathSegments: string[]): string
* @param 参数是一串字符串,返回一个绝对路径
* 比如 path.resolve(`${__dirname}`, '../../assets')
* __dirname是nodejs下的一个全局变量,可以获得当前文件所在目录的完整目录名
* 相当于从当前文件的目录 cd ../../assets/,获取这个assets目录的绝对路径
*/
const dirPath = path.resolve(`${__dirname}`, '../../assets/');
fileDisplay(dirPath);
/**
* 文件遍历方法
* @param filePath 需要遍历的文件路径
*/
function fileDisplay(filePath: string) {
// 根据文件路径读取文件,返回一个文件列表
fs.readdir(filePath, (err, files) => {
if (err) {
console.warn(err);
return;
}
// 遍历读取到的文件列表
files.forEach(filename => {
// path.join得到当前文件的绝对路径
const filepath = path.join(filePath, filename);
// 根据文件路径获取文件信息
fs.stat(filepath, (error, stats) => {
if (error) {
console.warn('获取文件stats失败');
return;
}
const isFile = stats.isFile(); // 是否为文件
const isDir = stats.isDirectory(); // 是否为文件夹
if (isFile) {
console.log(filepath); //如果是文件,输出它的路径咯~
}
if (isDir) {
fileDisplay(filepath); // 递归,如果是文件夹,就继续遍历该文件夹里面的文件;
}
});
});
});
}
ES6-Promise实现
假如您了解ES6之Promise,就可以拒绝这种回调地狱了,因为回调嵌套大量缩进会有不少缺点:难以复用、借助外层变量...
那我们就可以进阶了哦,究极进化:
// 读取文件的逻辑拉出
function fsReadDir(dir: string) {
return new Promise<string[]>((resolve, reject) => {
fs.readdir(dir, (err, files) => {
if (err) reject(err);
resolve(files);
});
});
}
// 获取fs.stats的逻辑拉出
function fsStat(path: string) {
return new Promise<fs.Stats>((resolve, reject) => {
fs.stat(path, (err, stat) => {
if (err) reject(err);
resolve(stat);
});
});
}
// 搜索文件主方法
async function fileSearch(dirPath: string) {
const files = await fsReadDir(dirPath);
const promises = files.map(file => {
return fsStat(path.join(dirPath, file));
});
const datas = await Promise.all(promises).then(stats => {
for (let i = 0; i < files.length; i += 1) files[i] = path.join(dirPath, files[i]);
return { stats, files };
});
datas.stats.forEach(stat => {
const isFile = stat.isFile();
const isDir = stat.isDirectory();
if (isDir) {
fileSearch(datas.files[datas.stats.indexOf(stat)]);
}
if (isFile) console.log(datas.files[datas.stats.indexOf(stat)]);
});
}
以上为Promise简单实现,便于新人阅读理解Promise的优点,更多Promise的深层实现请参考阮一峰老师的大全ECMAScript 6 入门,那么这篇文章就先结束了,但这不是全部。程序之路,漫漫,共勉。