여러 개의 .js를 differents 폴더에 Uglify (범위는 동일하지만)

Question

첫째, 미안 해요.

나는 시스템의 프론트 엔드를 개발 중이며, 여기에는 합쳐져서 app.js로 uglified 될 js 파일이있다. 괜찮아. 그러나 일부 js 파일은 요구에 따라로드됩니다. 즉, 파일이 differents 폴더에 있고 요청에 의해로드되며 uglified app.js를 사용합니다. 내 문제는 내가 전역 변수와 이름 함수를 uglify해야하고, 내 스크립트를 uglify 할 때 파일에 "context"가 없다는 것이다.

내 구조체 :

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

내 빌드 결과 :

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

설명의 편의를 위해 public/assets/js/app.js 함수 translate(a)을 가지고 있음을 고려한다. 이것은 단지 변수 'a'를 받고 값을 반환합니다. 예 :

function translate(a) { 
    return a; 
} 

첫째, 파일이 app.js는 단지 내 HTML에로드입니다. 사이트의 로케일에 따라 페이지 및 템플릿 디렉토리 파일이 동적으로 HTML에로드되어 app.js 기능을 사용합니다.

예 : public/assets/js/pages/*.js 또는 public/assets/js/templates/*.js :

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

내 문제는 그 함수가 다른 파일에 대한 노력하지 추하게 때문에 "translate"페이지와 템플릿 디렉토리에 JS 파일에 정의되지 않도록 동일한 문맥/범위가 필요합니다.

내 dev에 의존성 (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" 
    } 

내 gulpfile (만 추하게 섹션) :

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

누군가가 이유를 알고? 감사합니다. .

Answer 1

gulpfile에서 node.js를 사용하여 전역 변수와 특정 기능을 "임의로"변경하여 내 문제를 해결하는 방법을 만들었습니다. 이를 위해 모든 전역 변수를 ./scripts/core/_variables.js이라는 고유 한 파일로 구분했으며 여기서 각 변수는 라인에 대해 선언되었습니다. 모든 전역 변수를 다이나믹하게 맵핑하고, 함수 이름과 연결하고 allready 빌드 된 파일을 대체합니다. ./public/assets/js/**/*.js. 알고리즘 벨로우는 함수 이름과 디렉토리가 임의로 구성 될 수 있습니다. { 최상위 : 사실} 당신이 압착 롤러 변경하면 어떻게됩니까

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