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

【问题标题】：Merge js files into one with phpStorm使用 phpStorm 将 js 文件合并为一个
【发布时间】：2014-10-07 07:01:57
【问题描述】：

使用 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 文件。

谁能解释我必须使用的参数来配置我的文件观察器吗？

【问题讨论】：

我建议创建一个 shell 脚本，将所有 min.js 文件合并到一个指定文件中（例如，参见 github.com/benjaminwy/js.sh）并将其配置为 WebStorm 中的文件观察器，以便它监听缩小文件的变化
我不明白如何使用 phpStorm 进行配置...你能帮帮我吗？
为 javascript 文件创建一个新的文件观察器，将您的 shell 脚本的完整路径设置为程序。如果您的 shell 脚本需要一些参数，请将它们添加到“参数”字段。在“要刷新的输出路径”中设置脚本输出模式。此外，请确保创建一个仅包含您的缩小文件的自定义范围，并选择此范围作为您的文件观察器范围。
配置Webpack，我推荐使用Webpack Encore来创建配置文件。

标签： javascript node.js merge phpstorm

【解决方案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 部分。

【讨论】：