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

有人可以解释我必须使用的参数来配置我的filewatcher吗？

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＆＃34;文件＆＃34;。我使用JS_LAST_FILE来处理angularjs问题，因为我构建了模块并在该文件中添加了所有依赖项。然后将文件连接到JS_FULL_FILE。最后，将JS_FULL_FILE缩小为JS_MINIFIED_FILE。

更新文件时，我不使用观察程序来触发concat脚本。相反，当我在本地工作时，我不会连接文件，但我只是使用一个使用php scandir（）的自制函数将它们添加到页面的head部分。

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

1 个答案: