2017-11-08 17 views
0

Aurelia CLIで作成されていなかった既存のAureliaプロジェクトを維持しています。AureliaとSystem.jsプロダクションビルド

生産ビルドを作成する必要がありますが、現在の設定ではできません。開発ビルドは正常に動作しますが、期待通りに、多くのコードをユーザーマシンにダウンロードします。

gulp prod(下記参照gulpfile)を実行した後、私は2つのJSファイルを取得:app-build-{revnumber}.jsvendor-build-{revnumber}.jsを、しかしオーレリアはmain.jsファイルをロードしようとし続けます。

Error loading main.js

私は一緒にmain.jsを構築しようとした(gulpfile.js内のコードをコメント)が、何の成功がなかった - 唯一のベンダーバンドルがロードされます。ここでは

Only vendor bundle is loaded

は私の設定ファイルです:

config.js

System.config({ 
    baseURL: "/www", 
    defaultJSExtensions: true, 
    transpiler: "babel", 
    babelOptions: { 
    "stage": 0, 
    "optional": [ 
     "runtime", 
     "optimisation.modules.system" 
    ] 
    }, 
    paths: { 
    "*": "src/*", 
    "github:*": "jspm_packages/github/*", 
    "npm:*": "jspm_packages/npm/*" 
    }, 
    map: { /* mappings */ } 
}); 

gulpfile.js

var gulp = require('gulp'); 
var bundler = require('aurelia-bundler'); 
var image = image = require('gulp-image'); 
var replace = require('gulp-replace'); 
var gulpsync = require('gulp-sync')(gulp); 

var config = { 
    force: true, 
    baseURL: '.', 
    configPath: './config.js', 
    bundles: { 
    // "dist/main": { 
    // includes: [ 
    //  '[main.js]' 
    // ], 
    // options: { 
    //  inject: true, 
    //  minify: false, 
    //  rev: false 
    // } 
    // }, 
    "dist/app-build": { 
     includes: [ 
     '[**/*.js]', 
     '**/*.html!text', 
     '**/*.css!text' 
     ], 
     options: { 
     inject: true, 
     minify: true, 
     rev: true 
     } 
    }, 
    "dist/vendor-build": { 
     includes: [ /* all external modules */ ], 
     options: { 
     inject: true, 
     minify: true, 
     rev: true 
     } 
    } 
    } 
}; 

gulp.task("bundle", function() { 
    return bundler.bundle(config) 
    .then(function() { 
     gulp.src('config.js') 
     .pipe(replace('dist/', '')) 
     .pipe(replace('src', 'dist')) 
     .pipe(gulp.dest('')); 
    }); 
}); 

gulp.task("unbundle", 
    function() { 
    return bundler.unbundle(config) 
     .then(function() { 
     gulp.src('config.js') 
      .pipe(replace('dist', 'src')) 
      .pipe(gulp.dest('')); 
     }); 
    }); 

gulp.task("image-bundle", 
    function() { 
    gulp.src('./src/media/*') 
     .pipe(image()) 
     .pipe(gulp.dest('./dist/media')); 
    }); 

gulp.task("files-bundle", function() { 
    return gulp 
    .src('./src/style/material.woff2') 
    .pipe(gulp.dest('./dist/style')); 
}); 

gulp.task('prod', gulpsync.sync(['unbundle', 'bundle', 'image-bundle', 'files-bundle'])); 

gulp.task('dev', gulpsync.sync(['unbundle'])); 

index.htmlを

<!DOCTYPE html> 
<html> 
<head>...</head> 
<body aurelia-app="main"> 
    <script src="www/jspm_packages/system.js"></script> 
    <script src="www/config.js"></script> 
    <script> 
     System.import('aurelia-bootstrapper'); 
    </script> 
</body> 
</html> 

答えて

0

少し調整の多くの後、私はmain.js問題を解決しました。

System.jsがバンドルの依存関係を探していて、見つからなければネットワークにヒットするようです。 、バンドルソースconfig.js

として

  1. 連結dist/フォルダdist/**のパスを設定し、任意のガルプタスクでそれを変更しない:ここで私は私のバンドルを修正するためにやったことです。 from src to dist

  2. バンドルタスクが実行される前に、私はdist/app-buildバンドルでsrc/からdist/
  3. にすべての内容をコピーし、私はオプションdepCache: trueを追加しました。 falsemain.jsというエラーが出る)が出てきても動作しませんが、なぜか分かりません。

追加/修正さガルプタスク:

// deletes all files in the output path 
gulp.task('clean', ['unbundle'], function() { 
    return gulp.src(['dist/']) 
    .pipe(vinylPaths(del)); 
}); 

gulp.task('copy', function() { 
    return gulp.src(['src/**/*']) 
    .pipe(gulpCopy('dist/', { prefix: 1 })); 
}); 

gulp.task("bundle", sync(['clean', 'copy']), function() { 
    return bundler.bundle(config); 
}); 

gulp.task("unbundle", function() { 
    return bundler.unbundle(config); 
}); 
関連する問題