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

Question

Using phpStorm, I would like to merge multiple JavaScript files into one. I installed the closure compiler and configured the file watcher to minify each JavaScript file.

Now, I would like to combine all of my JavaScript files into one.

Here's the architecture of my project (a test project to merge js files) :

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

I would like to merge (first.min.js, second.min.js, third.min.js) into folder cache > main.js .

Ideally, merging all of the files would happen automatically; I don't want to specify each js file manually.

Can someone explain the arguments I must use to configure my filewatcher?

Answer 1

I used npm plugins concat , minifier and walk .

Here is the script I made :

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

First with walker, files are added to var "files". I used JS_LAST_FILE for angularjs concerns, as I build the module and add all the dependencies in that file. Then files are concatenated to JS_FULL_FILE. Finally JS_FULL_FILE is minified to JS_MINIFIED_FILE.

I do not use a watcher to trigger the concat script when a file is updated. Instead when I work locally, I don't concatenate files but I simply add them in the head part of the page using a homemade function that uses php scandir().