如何在Angular 2中使用gulp映射捆绑文件?

时间:2017-02-08 06:47:49

标签: angular gulp bundle

我正在尝试使用我的应用创建和使用该捆绑包。(我提到https://github.com/templth/angular2-packaging

我能够创建捆绑包它给了我2个文件一个vendor.min.js和app.min.js每个近470Kb但是在使用时我收到错误 GET:http://localhost:10039/retacc-sbb-ri-erepko-main/integrated-workshop/bundle/app.min.js(未找到404)

的index.jsp

<script>
    window.rest = '<%=(String) pageContext.getAttribute("resourceUrl", PageContext.REQUEST_SCOPE)%>'
</script>
<base href="/">

<!-- inject:js -->
<!-- endinject -->

<!-- inject:css -->
<!-- endinject -->
<appp>Loading...</app>

<!--bundled source :start-->
<script src="../build/bundle/app.min.js"></script>
<script src="../build/bundle/vendors.min.js"></script>
<!--bundled source :end-->

<!-- @if isDev -->
<script src="/retacc-sbb-ri-erepko-main/integrated-workshop/systemjs.config.js"></script>
<!-- @endif -->

<script>
    System.import('app').catch(function(err){ console.error(err); });
</script>

gulp任务

var gulp = require('gulp');


const ts = require('gulp-typescript');
const uglify = require('gulp-uglify');
const concat = require('gulp-concat');
var addsrc = require('gulp-add-src');


gulp.task('app-bundle', function() {
    var tsProject = ts.createProject('tsconfig.json', {
        typescript: require('typescript')
    });

    var tsResult = gulp.src([
        'src/**/*.ts'
    ])
        .pipe(ts(tsProject));

    return tsResult.js.pipe(addsrc.append('config-prod.js'))
        .pipe(concat('app.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('build/bundle'));
});

gulp.task('vendor-bundle', function() {
    return gulp.src([
        'node_modules/es6-shim/es6-shim.min.js',
        'node_modules/zone.js/dist/zone.js',
        'node_modules/reflect-metadata/Reflect.js',
        'node_modules/systemjs/dist/system.src.js',
        'node_modules/primeui/primeui-ng-all.min.js',
        'node_modules/moment/moment.js'
    ])
        .pipe(concat('vendors.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('build/bundle'));
});

systemjs.config.js

/**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
System.config({
        baseURL: '/retacc-sbb-ri-erepko-main/integrated-workshop',
        paths: {
            // paths serve as alias
            'npm:': 'libs/node_modules/'
        },
        // map tells the System loader where to look for things
        map: {
            // our app is within the app folder
            'app': 'bundle',
            // angular bundles
            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
            // other libraries
            'rxjs': 'npm:rxjs',
            'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
            'primeng': 'npm:primeng',
            'ng2-translate': 'npm:ng2-translate',
            '@ngrx': 'npm:@ngrx',
            'ngrx-store-logger': 'npm:ngrx-store-logger/dist',
            'moment': 'npm:moment'
        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            'app': {main: 'app.min.js', defaultExtension: 'js'},
            'rxjs': {main: 'Rx.js', defaultExtension: 'js'},
            'angular2-in-memory-web-api': {main: 'index.js', defaultExtension: 'js'},
            'primeng': {defaultExtension: 'js'},
            'ng2-translate': {main: 'ng2-translate.js', defaultExtension: 'js'},
            '@ngrx/core':  {main: 'bundles/core.umd.js', defaultExtension: 'js'},
            '@ngrx/store': {main: 'bundles/store.umd.js', defaultExtension: 'js'},
            'ngrx-store-logger': { main: 'index.js', format: 'cjs'},
            'moment': { main: 'moment', defaultExtension: 'js'}
        }
    });
})(this);

0 个答案:

没有答案