Home > Article > Web Front-end > How to implement project building and file merging in js?

How to implement project building and file merging in js?

零下一度Original: 2017-06-26 13:32:042093browse

Previous words

Generally, we use build tools to complete the automation of projects. This article mainly introduces how to use nodeJS to implement simple project structure construction and file merging

Project construction

Assume that the final project name is 'test' and the structure is as follows As shown in the figure

Then, first you need to set up a JSON object to save the directory structure to be created

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>',
        }
    ]
};

Directory structure The creation logic is as follows

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;
            }
        });
    }
}

File merging

Assume that the goal is to merge the files in the 'test' directory All js files. The 'test' directory structure is as follows, including 1.js and 2.js in the js folder

1.js
js2.js

Among them, the contents of 1.js and 2.js are as follows

//1.jsconsole.log(1);//2.jsconsole.log(2);

Before merging these two files, you first need to implement a directory traversal function to traverse the 'test' directory. According to the directory traversal chapter in the nodejs file operation blog, you can get the following code

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);
        }
    });
}

The logic of file merging is as follows

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);
});

In this way, when the content of the 1.js file changes, the merged result file result.js It will take effect immediately and be re-merged into the latest content

The above is the detailed content of How to implement project building and file merging in js?. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed introduction to the basic knowledge about node jsNext article：Detailed introduction to the basic knowledge about node js

See more

How to implement project building and file merging in js?

Previous words

Project construction

File merging

Related articles