使用nodeJS實現前端項目自動化之項目構建和文件合并 - xiaohuochai－IT工程師數位筆記本

文章出處

前面的話

　　一般地，我們使用構建工具來完成項目的自動化操作。本文主要介紹如何使用nodeJS來實現簡單的項目結構構建和文件合并

項目構建

　　假設，最終實現的項目名稱為'test'，結構如下圖所示

　　那么，首先需要先設置一個JSON對象來保存要創建的目錄結構

var projectData = {
    'name' : 'test',
    'fileData' : [
        {
            'name' : 'css',
            'type' : 'dir'
        },
        {
            'name' : 'js',
            'type' : 'dir'
        },
        {
            'name' : 'images',
            'type' : 'dir'
        },
        {
            'name' : 'index.html',
            'type' : 'file',
            'content' : '<html>\n\t<head>\n\t\t<title>title</title>\n\t</head>\n\t<body>\n\t\t<h1>Hello</h1>\n\t</body>\n</html>',
        }
    ]
};

　　目錄結構的創建邏輯如下

var fs = require('fs');
if ( projectData.name ) {
    fs.mkdirSync(projectData.name);
    var fileData = projectData.fileData;
    if ( fileData && fileData.forEach ) {
        fileData.forEach(function(f) {
            f.path = projectData.name + '/' + f.name;
            f.content = f.content || '';
            switch (f.type) {
                case 'dir':
                    fs.mkdirSync(f.path);
                    break;
                case 'file':
                    fs.writeFileSync(f.path, f.content);
                    break;
                default :
                    break;
            }
        });
    }
}

文件合并

　　假設，目標是合并'test'目錄下的所有js文件。'test'目錄結構如下所示，包含1.js，以及js文件夾內的2.js

1.js
js
    2.js

　　其中，1.js與2.js的內容如下

//1.js
console.log(1);
//2.js
console.log(2);

　　在合并這兩個文件之前，首先需要實現一個目錄遍歷函數來遍歷'test'目錄，根據nodejs之文件操作博客中的目錄遍歷章節，可得到如下代碼

function travel(dir, callback) {
    fs.readdirSync(dir).forEach(function (file) {
        var pathname = path.join(dir, file);

        if (fs.statSync(pathname).isDirectory()) {
            travel(pathname, callback);
        } else {
            callback(pathname);
        }
    });
}

　　文件合并的邏輯如下

var fs = require('fs');
var path = require('path');var path = require('path');
var filedir = './test';

fs.watch(filedir, function(ev, file) {
    //用于存放所有的js文件
    var arr = [];
    //將每一個js文件的路徑存到arr數組中
    function travel(dir) {
        fs.readdirSync(dir).forEach(function (file) {
            var pathname = path.join(dir, file);       
            if (fs.statSync(pathname).isDirectory()) {
                travel(pathname);
            } else {
                arr.push(pathname);
            }
        });
    }      
    //只要有一個文件發生了變化，我們就需要對這個文件夾下的所有文件進行讀取，然后合并
    travel(filedir);
    //讀取數組arr中的文件內容，并合并
    function concat(arr){
        var content = '';
        arr.forEach(function(item) {
            var c = fs.readFileSync(item);
            content += c.toString() + '\n';
        });    
        fs.writeFile('./result.js', content);
    }
    concat(arr);
});