angular 2 个相对路径包 gulp

Question

我正在使用 Spring 4.3.5.Release 开发 Web 应用程序。我在前端使用 angular 2。在组件内部，我按照这里的指南 templateURLs 和 StyleURLs 使用了相对路径

Component-relative Paths

但我对如何使用 gulp 捆绑此项目结构感到困惑，因为我们放置了所有与组件相关的文件（html、css、ts) 等到同一个文件夹中。

我会使用 gulp 创建一个编译 js 文件的缩小版本，但是我如何维护相对路径的这个结构。

如果有人能提供帮助，我们将非常高兴。

Answer 1

使用gulp-inline-ng2-template plugin to inline the CSS and HTML, prior to compiling with ngc and bundling with rollup:

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

编译为 ES6 模块格式（通过汇总进行 tree-shaking 的先决条件）：

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

汇总包：

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

angular 2 个相对路径包 gulp

angular 2 relativepath bundle with gulp

bundle

relative-path

gulp

angular