角度jsのメモリが不足していますgulp sourcemap ngannonate with babel

Question

私の角型JSプロジェクトではes6構文を使用していますが、gulp buildを実行するとエラーがスローされますが、githubで検索するとgulp uglify何人かはこれがバベルの問題であり、他の人はng-annonateの問題だと言う人もいます。

Ubuntuの14.04

ノード-v：8.4.0

NPM -v：5.3.0

バベルの--version：6.26.0（バベル - コア6.26.0）

package.json

{ 
    "name": "Project", 
    "version": "0.0.0", 
    "dependencies": { 
    "gulp-open": "^2.0.0" 
    }, 
    "scripts": { 
    "test": "gulp test" 
    }, 
    "devDependencies": { 
    "babel": "^6.23.0", 
    "babel-core": "^6.25.0", 
    "babel-preset-es2015": "^6.24.1", 
    "browser-sync": "~2.9.11", 
    "browser-sync-spa": "~1.0.3", 
    "chalk": "~1.1.1", 
    "del": "~2.0.2", 
    "eslint-plugin-angular": "~0.12.0", 
    "estraverse": "~4.1.0", 
    "gulp": "~3.9.0", 
    "gulp-angular-filesort": "~1.1.1", 
    "gulp-angular-templatecache": "~1.8.0", 
    "gulp-autoprefixer": "~3.0.2", 
    "gulp-babel": "^7.0.0", 
    "gulp-clean-css": "~2.0.12", 
    "gulp-connect": "^5.0.0", 
    "gulp-eslint": "~1.0.0", 
    "gulp-filter": "~3.0.1", 
    "gulp-flatten": "~0.2.0", 
    "gulp-html-replace": "^1.6.1", 
    "gulp-htmlmin": "~2.0.0", 
    "gulp-inject": "~3.0.0", 
    "gulp-less": "~3.0.3", 
    "gulp-livereload": "^3.8.1", 
    "gulp-load-plugins": "~0.10.0", 
    "gulp-merge": "^0.1.1", 
    "gulp-ng-annotate": "~1.1.0", 
    "gulp-ng-config": "^1.3.1", 
    "gulp-nginxer": "^1.0.0", 
    "gulp-order": "^1.1.1", 
    "gulp-protractor": "~1.0.0", 
    "gulp-rename": "~1.2.2", 
    "gulp-replace": "~0.5.4", 
    "gulp-rev": "~6.0.1", 
    "gulp-rev-replace": "~0.4.2", 
    "gulp-size": "~2.0.0", 
    "gulp-sourcemaps": "~1.6.0", 
    "gulp-uglify": "~1.4.1", 
    "gulp-useref": "~1.3.0", 
    "gulp-util": "~3.0.6", 
    "gulp-war": "^0.1.4", 
    "gulp-zip": "^3.2.0", 
    "gulp.spritesmith": "^6.3.0", 
    "http-proxy-middleware": "~0.9.0", 
    "klaw-sync": "^1.1.2", 
    "lodash": "~4.0.0", 
    "main-bower-files": "~2.9.0", 
    "merge-stream": "^1.0.1", 
    "path": "^0.12.7", 
    "phantomjs": "~1.9.18", 
    "uglify-save-license": "~0.4.1", 
    "wiredep": "~2.2.2" 
    }, 
    "engines": { 
    "node": ">=0.10.0" 
    } 
} 

グッ/ .babelrc

{ 
    "presets": ["es2015"], 
    "plugins": ["syntax-decorators", "ng-annotate"] // this line is added after seeking for solution 
} 

グッ/ build.js関連するコード

.pipe(jsFilter) 
    .pipe($.sourcemaps.init()) 
    .pipe($.babel({"presets": [ ["es2015", { "modules": false} ] ], compact: false})) 
    .pipe($.ngAnnotate()) 
    .pipe($.uglify({ 
     preserveComments: $.uglifySaveLicense 
    })).on('error', conf.errorHandler('Uglify')) 
    .pipe($.sourcemaps.write('.')) 
    .pipe(jsFilter.restore) 

もthis solutionに従って.pipe(uglify({compress: {sequences: false, join_vars: false}}))を試みました。しかし、ここで

がgulp build

<--- Last few GCs ---> 

[15435:0x303a4b0] 401581 ms: Mark-sweep 1399.9 (1459.1) -> 1399.9 (1459.1) MB, 3617.4/0.0 ms allocation failure GC in old space requested [15435:0x303a4b0] 405886 ms: Mark-sweep 1399.9 (1459.1) -> 
1399.9 (1459.1) MB, 4101.3/0.0 ms allocation failure GC in old space requested [15435:0x303a4b0] 409592 ms: Mark-sweep 1399.9 (1459.1) -> 1399.9 (1459.1) MB, 3705.3/0.0 ms last resort [15435:0x303a4b0] 413501 ms: Mark-sweep 1399.9 (1459.1) -> 1399.9 (1459.1) MB, 3908.9/0.0 ms last resort 


<--- JS stacktrace ---> 

==== JS stack trace ========================================= 

Security context: 0x1d10fec9cef1 <JSObject> 
    1: /* anonymous */ [/opt/project/path/node_modules/vinyl-sourcemaps-apply/node_modules/source-map/lib/source-map/source-map-generator.js:~52] [pc=0x355474d0ca02](this=0xc4a489090d9 <JSGlobal Object>,mapping=0xbf1d8defe31 <Object map = 0xa04f5db0ae9>) 
    2: arguments adaptor frame: 3->1 
    3: forEach(this=0x11ebaae17be9 <JSArray[466526]>) 
    5: SourceMapConsumer_ea... 

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory 1: node::Abort() [gulp] 2: 0x128fdfc [gulp] 3: v8::Utils::ReportOOMFailure(char const*, bool) [gulp] 4: v8::internal::V8::FatalProcessOutOfMemory(char const*, bool) [gulp] 5: v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationSpace) [gulp] 6: v8::internal::Runtime_AllocateInTargetSpace(int, v8::internal::Object**, v8::internal::Isolate*) [gulp] 7: 0x3554749840dd Aborted 

Answer 1

主な原因は、ES6構文では動作しませんuglifyプラグインはとても一口にこの

1. npm install babel-cli -g

2. bower install gulp-uglify-es --save-dev

3. 追加プラグインと更新コードをやった/ build.js

私はES6の構文を使用していないので、それがうまく働いていたvar uglify = require('gulp-uglify-es').default;

とwrire belowcinsideの一気タスク

.pipe($.sourcemaps.init()) 
    .pipe($.babel({"presets": [ ["es2015", { "modules": false} ] ], compact: false})) 
    .pipe($.ngAnnotate()) 
    .pipe(uglify()).on('error', conf.errorHandler('Uglify')) 
    .pipe($.sourcemaps.write('.')) 

更新package.json

{ 
    "name": "Project", 
    "version": "0.0.0", 
    "dependencies": { 
    "gulp-open": "^2.0.0" 
    }, 
    "scripts": { 
    "test": "gulp test" 
    }, 
    "devDependencies": { 
    "babel": "^6.23.0", 
    "babel-core": "^6.25.0", 
    "babel-preset-es2015": "^6.24.1", 
    "babel-preset-minify": "^0.2.0", 
    "chalk": "~1.1.1", 
    "del": "~2.0.2", 
    "eslint-plugin-angular": "~0.12.0", 
    "estraverse": "~4.1.0", 
    "gulp": "~3.9.0", 
    "gulp-angular-filesort": "~1.1.1", 
    "gulp-angular-templatecache": "~1.8.0", 
    "gulp-autoprefixer": "~3.0.2", 
    "gulp-babel": "^7.0.0", 
    "gulp-babel-minify": "^0.2.0", 
    "gulp-clean-css": "~2.0.12", 
    "gulp-connect": "^5.0.0", 
    "gulp-eslint": "~1.0.0", 
    "gulp-filter": "~3.0.1", 
    "gulp-flatten": "~0.2.0", 
    "gulp-html-replace": "^1.6.1", 
    "gulp-htmlmin": "~2.0.0", 
    "gulp-inject": "~3.0.0", 
    "gulp-less": "~3.0.3", 
    "gulp-livereload": "^3.8.1", 
    "gulp-load-plugins": "~0.10.0", 
    "gulp-merge": "^0.1.1", 
    "gulp-ng-annotate": "~1.1.0", 
    "gulp-ng-config": "^1.3.1", 
    "gulp-order": "^1.1.1", 
    "gulp-protractor": "~1.0.0", 
    "gulp-rename": "~1.2.2", 
    "gulp-replace": "~0.5.4", 
    "gulp-rev": "~6.0.1", 
    "gulp-rev-replace": "~0.4.2", 
    "gulp-size": "~2.0.0", 
    "gulp-sourcemaps": "~1.6.0", 
    "gulp-uglify": "~1.4.1", 
    "gulp-uglify-es": "^0.1.3", 
    "gulp-useref": "~1.3.0", 
    "gulp-util": "~3.0.6", 
    "gulp-war": "^0.1.4", 
    "gulp-zip": "^3.2.0", 
    "gulp.spritesmith": "^6.3.0", 
    "http-proxy-middleware": "~0.9.0", 
    "klaw-sync": "^1.1.2", 
    "lodash": "~4.0.0", 
    "main-bower-files": "~2.9.0", 
    "merge-stream": "^1.0.1", 
    "path": "^0.12.7", 
    "phantomjs": "~1.9.18", 
    "uglify-es": "^3.0.28", 
    "uglify-save-license": "~0.4.1", 
    "wiredep": "~2.2.2" 
    }, 
    "engines": { 
    "node": ">=0.10.0" 
    } 
} 

Answer 2

を実行したときにアプリを構築するために多くのメモリを必要とするので、それは単に可能性があるログは役立ちません。 node.jsにはメモリ割り当てのための1.4Gbの制限があります。この制限を増やす方法については、this questionを参照してください。これが役立つかどうかをお知らせください！