faisceau angulaire de chemin relatif 2 avec gulp

Question

Je travaille sur une application Web en utilisant Spring 4.3.5.Release. J'utilise angulaire 2 pour front-end. composants à l'intérieur, j'ai utilisé des chemins relatifs aux templateURLs et StyleURLs suivant le guide ici

Component-relative Paths

Mais je suis confus sur la façon de regrouper cette structure de projet en utilisant gulp que nous plaçons tous les composants connexes fichiers (html, css, ts) etc dans le même dossier.

Je voudrais créer une version minifiée de fichiers js compile en utilisant gulp, mais comment puis-je maintenir cette structure pour le chemin relatif.

Serait vraiment heureux si quelqu'un pouvait vous aider.

Answer 1

utiliser le plugin gulp-inline-ng2-template inline CSS et HTML, avant de compiler avec ngc et les offres groupées avec rollup:

Compiler avec NGC:

gulp.task('compile:aot', function (cb) { 
    exec('"node_modules\\.bin\\ngc" -p tsconfig.prod.json', function (err, stdout, stderr) { 
    console.log(stdout); 
    console.log(stderr); 
    cb(err); 
    }); 
}); 

Compiler au format du module ES6 (pré-requis pour l'arbre -shaking par cumul):

gulp.task('compile:es6', function() { 
    return gulp.src(['./src/**/*.ts']) 
    .pipe(inlineNg2Template({ base: '/src', useRelativePaths:true })) 
    .pipe(tsc({ 
     "target": "es5", 
     "module": "es6", 
     "moduleResolution": "node", 
     "experimentalDecorators": true, 
     "emitDecoratorMetadata": true, 
     "lib": ["es6", "dom"] 
    })) 
    .pipe(gulp.dest('./dist/src')); 
}); 

Bundle avec cumul:

gulp.task('rollup:app', function(){ 
    return rollup.rollup({ 
    entry: 'dist/src/main.aot.js', 
    onwarn: function (warning) { 
     // Skip certain warnings 

     // should intercept ... but doesn't in some rollup versions 
     if (warning.code === 'THIS_IS_UNDEFINED') { return; } 
     // intercepts in some rollup versions 
     if (warning.message.indexOf("The 'this' keyword is equivalent to 'undefined'") > -1) { return; } 

     // console.warn everything else 
     console.warn(warning.message); 
    }, 

    plugins: [ 
      nodeResolve({ 
      jsnext: true, 
      module: true 
      }), 
      commonjs({ 
       include: 'node_modules/rxjs/**', 
      }) 
    ] 
    }) 
    .then(function(bundle) { 
     bundle.write({ 
     format: "iife", 
     dest: "dist/app.bundle.js", 
     sourceMap: true 
     }); 
    }); 
}); 

Demo Starter App