使用phpStorm将js文件合并为一个文件

Question

使用phpStorm，我想将多个JavaScript文件合并为一个文件。我安装了闭包编译器，并配置了文件观察器来缩小每个JavaScript文件。

现在，我想把我所有的JavaScript文件合并成一个文件。

下面是我的项目(合并js文件的测试项目)的架构：

index.php
js(folder) >
    first.js (+first.min.js),
    second.js (+second.min.js),
    third.js (+third.min.js)
cache (folder)
    main.js

我想合并(first.min.js，second.min.js，third.min.js)到文件夹cache > main.js。

理想情况下，合并所有文件将自动发生；我不想手动指定每个js文件。

有人能解释一下我必须用来配置文件守护程序的参数吗？

Answer 1

我使用了npm插件concat、minifier和walk。

下面是我编写的脚本：

var walk = require('walk'),
    concat = require('concat'),
    minifier = require('minifier'),
    files = [];

var JS_SOURCES_DIR = 'app/components',
    JS_LAST_FILE = 'app/app.module.js',
    JS_DIR = 'app/',
    JS_FULL_FILE = JS_DIR + 'app.js',
    JS_MINIFIED_FILE = 'app.min.js',
    JS_MINIFIED_FILE_PATH = JS_DIR + JS_MINIFIED_FILE;

var walker = walk.walk(JS_SOURCES_DIR, {followLinks: false});

walker.on('file', (root, stat, next) => {
    var fullpath = root.replace(/\\/g, '/');
    var regex = new RegExp(/.+\.js$/);
    if (stat.name.match(regex)) {
        files.push(fullpath + '/' + stat.name);
    }
    next();
});

walker.on('end', function () {
    files.push(JS_LAST_FILE);
    files.forEach(function (item) {
        console.log(item);
    })
    concat(files, JS_FULL_FILE).then((result) => {
        minifier.minify(JS_FULL_FILE, {output: JS_MINIFIED_FILE_PATH});
        console.log('\n[OK] ' + JS_MINIFIED_FILE + ' sucessfully updated');
    }, function (error) {
        console.log('[ERROR] JS concat failure: ' + error.message);
    });
});

minifier.on('error', function (error) {
    console.log('\n[ERROR] JS minify error: ' + error);
});

首先使用walker，文件被添加到var " files“中。在构建模块并在该文件中添加所有依赖项时，我将JS_LAST_FILE用于angularjs关注点。然后将文件连接到JS_FULL_FILE。最后，JS_FULL_FILE被缩减为JS_MINIFIED_FILE。

当文件更新时，我不使用监视器来触发concat脚本。相反，当我在本地工作时，我不会连接文件，而只是使用一个使用php scandir()的自制函数将它们添加到页面的head部分。