Uglify mehrere .js zu verschiedenen Ordnern (aber mit gleichem Umfang)

Question

Erstens, tut mir leid mein Englisch.

Ich entwickle das Frontend eines Systems, wo ich einige js-Dateien habe, die zu app.js verkettet und egglifiziert werden. Das ist ok. Aber einige js-Dateien werden nach Bedarf geladen, das heißt, die Dateien befinden sich in verschiedenen Ordnern, die auf Anforderung geladen werden, und verbrauchen die uglified app.js. Mein Problem ist, dass ich globale Variablen und Namen Funktionen hüpfen muss, und wenn ich meine Skripte hüpfen werde, enthalten die Dateien nicht den "Kontext" gleich.

Meine Struktur:

|project 
    |scripts 
    |core 
     *.js 
    |utils 
     *.js 
    |pages 
     *.js 
    app.js 
    vendor.js 
    |templates 
    *.hbs // this files will be "compiled" to js with gulp-handlebars 

Mein Build Ergebnis:

|public 
    |assets 
    |js 
     |pages // separated files, uglified with app.js scope 
     *.js 
     |templates // separated files, uglified with app.js scope 
     *.js 
     app.js // concat and uglify app.js, core and utils directories 
     vendor.js // uglify separed keeping global variables (bower) 

Zur Erleichterung der Erklärung, die Ansicht, dass public/assets/js/app.js eine Funktion translate(a). Dies empfängt nur die Variable 'a' und gibt den Wert zurück. Ex:

function translate(a) { 
    return a; 
} 

Zum einen ist die Datei app.js die nur in meinem html geladen. Je nach Gebietsschema der Site werden die Dateien der Seiten- und Vorlagenverzeichnisse dynamisch in den HTML-Code geladen, wobei app.js-Funktionen verbraucht werden.

Ex: public/assets/js/pages/*.js oder public/assets/js/templates/*.js:

function consumeApp(a) { 
    return translate(a); 
} 

Mein Problem ist, dass die Funktion „translate“ nicht für js Dateien in Seiten und Template-Verzeichnissen definiert, weil das nicht verunstaltet für verschiedene Dateien arbeiten, benötigen den gleichen Kontext/Bereich.

Mein dev abhängigkeit (package.json):

"devDependencies": { 
    "babel-core": "^6.4.0", 
    "babel-preset-es2015": "^6.3.13", 
    "babel-register": "^6.5.2", 
    "bower": "^1.8.0", 
    "del": "^1.1.1", 
    "gulp": "^3.9.1", 
    "gulp-autoprefixer": "^3.1.1", 
    "gulp-babel": "^6.1.1", 
    "gulp-bower": "0.0.13", 
    "gulp-browserify": "^0.5.1", 
    "gulp-cache": "^0.4.6", 
    "gulp-concat": "^2.6.1", 
    "gulp-cssnano": "^2.1.2", 
    "gulp-declare": "^0.3.0", 
    "gulp-eslint": "^3.0.1", 
    "gulp-handlebars": "^4.0.0", 
    "gulp-htmlmin": "^3.0.0", 
    "gulp-imagemin": "^3.2.0", 
    "gulp-include": "^2.3.1", 
    "gulp-load-plugins": "^1.5.0", 
    "gulp-plumber": "^1.1.0", 
    "gulp-precompile-handlebars": "^2.0.5", 
    "gulp-sass": "^3.1.0", 
    "gulp-size": "^2.1.0", 
    "gulp-sourcemaps": "^2.6.0", 
    "gulp-sync": "^0.1.4", 
    "gulp-uglify": "^2.1.2", 
    "gulp-wrap": "^0.13.0", 
    "handlebars": "^4.0.10", 
    "jscs": "^3.0.7", 
    "uniq": "^1.0.1", 
    "webpack": "^2.6.1", 
    "webpack-stream": "^3.2.0" 
    } 

Mein gulpfile (nur Abschnitt uglify):

const gulp = require('gulp'); 
const gulpsync = require('gulp-sync')(gulp); 
const gulpLoadPlugins = require('gulp-load-plugins'); 
const del = require('del'); 
const concat = require('gulp-concat'); 
const webpack = require('webpack-stream'); 

const $ = gulpLoadPlugins(); 

// .... uglify tasks run after all be in public 

gulp.task('scripts:uglify', gulpsync.sync([ 
    'scripts:uglify-vendor', 
    'scripts:uglify-app' 
])); 

gulp.task('scripts:uglify-app',() => { 
    return gulp.src([ 
     'public/assets/js/**/*js', 
     '!public/assets/js/vendor.js', 
    ]).pipe($.uglify({ 
     mangle: { 
      toplevel: true 
     } 
    })) 
     .pipe(gulp.dest('public/assets/js')); 
}); 

gulp.task('scripts:uglify-vendor',() => { 
    return gulp.src('public/assets/js/vendor.js') 
     .pipe($.uglify({mangle: false})) 
     .pipe(gulp.dest('public/assets/js')); 
}); 

jemand wissen, warum? Danke.

Answer 1

Ich habe eine Methode in gulpfile mit node.js erstellt, die globale Variablen und spezifische Funktionen "zufallsverteilt", um mein Problem zu lösen. Um dies zu tun, habe ich alle globalen Variablen in einer eindeutigen Datei namens ./scripts/core/_variables.jsgetrennt, wobei jede Variable Zeile für Zeile deklariert ist. Ich habe alle globalen Variablen dynamisch zugeordnet, indem ich mit den Funktionen name und den in ./public/assets/js/**/*.js erstellten Dateien ersetzt habe. Der Algorithmus unten kann mit Funktionen Namen und Verzeichnisse konfiguriert werden, die randomfy sein können.

const fs = require('fs'); // added 
const prettyjson = require('prettyjson'); // added 

const consoleLog = (msg) => { 
    console.log(prettyjson.render(msg)); 
}; 

gulp.task('run-build', gulpsync.sync([ 
    'myTasks', // tasks to run build 
]]),() => { 
    return gulp.src('public/assets/**/*').pipe($.size({title: 'build', gzip: true})); 
}); 

gulp.task('build', gulpsync.sync(['run-build', 'randomly']),() => { 
    return true; 
}); 

gulp.task('randomly',() => { 
    return new Promise(function(resolve) { 

     // set here the functions name to randomly 
     function getFunctions() { 
      consoleLog('get functions name'); 
      return [ 
       'translate', 
       'myFirstFunction', 
       'mySecondFunction' 
      ] 
     } 

     // get automatically variables in ./scripts/core/_variables.js 
     function getVariables() { 
      consoleLog('start global variables loader'); 

      var fileContent = fs.readFileSync('./scripts/core/_variables.js', 'utf8'); 
      var a = fileContent.split('='); 
      var consts = [], 
       lets = []; 
      for (var i = 0; i < a.length; i++) { 
       var c = a[i].split('const '), 
        l = a[i].split('let '); 
       if (c[1]) 
        consts.push(c[1].toString().trim()); 
       if (l[1]) 
        lets.push(l[1].toString().trim()); 
      } 
      consoleLog('finished global variables loader'); 
      return consts.concat(lets); 
     } 

     // set random unique names to variables and functions 
     function setRandomNames(variables) { 
      return new Promise(function(resolve) { 
       consoleLog('start fake names generator'); 
       var fakeNames = []; 
       var possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'; 

       function existFakeName(name) { 
        for(var i in fakeNames) 
         if(fakeNames[i].fake === name) 
          return true; 
        return false; 
       } 

       function newNames() { 
        return new Promise(function(resolve) { 
         var name = ''; 
         for (var i = 0; i < 10; i++) 
          name += possible.charAt(Math.floor(Math.random() * possible.length)); 
         if (fakeNames.length <= variables.length && !existFakeName(name)) { 
          var item = fakeNames.length; 
          fakeNames.push({ 
           name: variables[item], 
           fake: name 
          }); 
          if (fakeNames.length === variables.length) { 
           consoleLog(fakeNames); 
           consoleLog('finished fake names generator'); 
           resolve(); 
          } 
          else 
           resolve(newNames()); 
         } 
         else 
          resolve(newNames()); 
        }); 
       } 
       newNames().then(() => { 
        resolve(fakeNames); 
       }) 
      }); 
     } 

     function listDirectory(dir) { 
      return new Promise((resolve) => { 
       var listFiles = fs.readdirSync(dir); 
       var response = []; 
       for (var i in listFiles) { 
        response.push(dir + listFiles[i]); 
       } 
       resolve(response); 
      }); 
     } 
     function replaceFile(file, fakes) { 
      return new Promise(function(resolve) { 
       // consoleLog('start replace file ' + file); 

       var fileContent = fs.readFileSync(file, 'utf8'); 
       for (var i in fakes) 
        fileContent = fileContent.split(fakes[i].name).join(fakes[i].fake); 
       resolve(writeFile(file, fileContent)); 
      }) 
     } 
     function writeFile(file, fileContent) { 
      return new Promise(function(resolve) { 
       fs.writeFile(file, fileContent, function (err) { 
        if (err) { 
         consoleLog('error ' + file); 
         resolve(); 
        } 

        // consoleLog('finished replace file and saved: ' + file); 
        resolve(); 
       }); 
      }); 
     } 

     consoleLog('start randomly'); 
     setRandomNames(getVariables().concat(getFunctions())).then(function(fakes) { 
      consoleLog('start list directories'); 
      Promise.all([ 
       listDirectory('./public/assets/js/pages/') 
      ]).then(function(response) { 

       consoleLog('finished list directories'); 

       var files = ['./public/assets/js/app.js']; // change app.js 
       for (var i in response) 
        files = files.concat(response[i]); 

       var promises = []; 
       for(var file in files) 
        promises.push(replaceFile(files[file], fakes)); 

       Promise.all(promises).then(function() { 
        consoleLog('all files replaced and saved'); 
        consoleLog('finished randomly'); 
        resolve(); 
        return true; 
       }); 
      }); 
     }); 
    }); 
});