Question

我正在使用Spring 4.3.5.Release 开发Web应用程序。我使用角度2作为前端。在内部组件中，我使用了 templateURLs 和 StyleURLs 的相对路径，按照此处的指南进行操作

但是我对如何使用gulp捆绑这个项目结构感到困惑，因为我们将所有与组件相关的文件（ html，css，ts ）放在同一个文件夹中。

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

如果有人可以提供帮助，我会非常高兴。

Answer 1

在使用ngc进行编译并与gulp-inline-ng2-template捆绑之前，使用rollup插件内联CSS和HTML：

使用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模块格式（通过汇总进行树抖动的先决条件）：

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

与gulp的角度2相对路径束

1 个答案: