【问题标题】:Extend angular-cli ng build to ignore git repository?扩展 angular-cli ng 构建以忽略 git 存储库?
【发布时间】:2016-11-11 12:36:00
【问题描述】:

使用 angular-cli 和自定义 express 服务器,我将一个基本的 Angular2 应用程序部署到 heroku。运行 ng build 非常适合编译所有 Angular 文件,以及我添加到 src 和 public 目录的文件。但是,我不得不手动添加一些文件,并且在运行 ng build 时将它们删除。

最大的问题是我在 dist 文件夹中用于部署的 git 存储库。每次我运行 ng build 时它都会被删除/覆盖。因此,我不必将更改推送到heroku,而是必须初始化一个新的存储库并推送一个新的应用程序。

ng build 可以扩展为忽略或添加 dist 目录下的文件吗?

【问题讨论】:

  • 你能映射你的基础 repo 并指示 heoku 使用 dist 文件夹吗?
  • 不要在 dist 中手动添加任何文件。需要成为 dist 一部分的文件应在 angular-cli-build.js 文件中的 vendorNpmFiles 数组中配置
  • 您在使用 3rd 方集成时做错了。你能描述一下你是怎么做的吗?

标签: git heroku build angular angular-cli


【解决方案1】:

所以看来我的做法是错误的。我的情况的简短答案是使用 gulp 将 dist 目录中的文件通过管道传输到另一个目录以进行部署和管道服务器文件。如果有人感兴趣,这里是完整的工作流程:

开发中

所有服务器文件都进入 angular-cli 生成的 src 目录。我将服务器目录用于模型、路由等,并将 app.js 文件用作应用程序的入口点。当从命令行运行 ng build 时,这些文件将被添加到 dist 目录。所以 app.js 文件将指向 index.html。这是一个简单的例子:

// app.js

var express = require('express');
var app = express();
var router = express.Router();
var port = process.env.PORT || 3000;

router.get('/*', function (req, res) {
    res.sendfile(path.join(__dirname, "index.html"));
});

app.listen(port, function () {
    console.log('Express server started on port ' + port);
});

module.exports = app;

您可以从命令行运行 ng build 或 ng test,这会将服务器文件添加到 dist 目录。要运行应用程序,请从命令行使用 node dist/app。

生产中

当使用 ng build -production 为生产构建时,src 目录中的服务器文件不会移动到 dist 目录中。所以我使用 gulp 创建一个新目录,添加 dist 目录中的文件和 src 目录中的服务器文件。我不擅长任务运行器,所以这里是完整的代码:

从命令行:npm install --save-dev gulp del 将 gulpfile.js 添加到应用程序根目录。

// gulpfile.js

var gulp = require('gulp');
var del = require('del');

// destination for piped files
var deployment = 'heroku';

// remove old files from the deployment directory
gulp.task('clean', function() {
    del([ (deployment + '/**/*'), '!.git']);
});

//  grab the angular files
gulp.task('angularFiles', function() {
    return gulp.src('dist/**/*')
        .pipe(gulp.dest(deployment));
});

// grab the server files and package.json
gulp.task('packageFile', function() {
    return gulp.src('package.json')
        .pipe(gulp.dest(deployment));
});

gulp.task('serverFiles', function() {
    return gulp.src('src/server/**/*')
        .pipe(gulp.dest(deployment + '/server'));
});

gulp.task('appFile', function() {
    return gulp.src('src/app.js')
        .pipe(gulp.dest(deployment));
});

// make a single task for the npm script
gulp.task('buildProd', ['angularFiles','packageFile','serverFiles','appFile']);

在 package.json 文件中,新建一个脚本:"build:heroku": "gulp clean && ng b -prod && gulp buildProd"

这会运行 gulp 任务并使用 angular ng b -prod 命令,该命令为生产而构建。

在命令行中使用npm run build:heroku运行应用程序根目录下的脚本

第一次运行脚本时,它将创建部署目录(在我的例子中称为 heroku),清理它,添加角度文件,然后添加服务器文件和 package.json。由于我不是任务运行专家,我手动做的一件事是从 heroku 目录中删除多余的脚本,所以它看起来像这样:

// heroku/package.json
"scripts": {
  "start": "node app.js",
}

否则,heroku 可能会在部署期间尝试运行其他一些 angular npm 脚本。

然后我 cd 进入 heroku 目录并使用 git 进行部署。从命令行:

git init // only for first deployment
git add -A
git commit -m 'ready for deployment'
heroku create // only for first deployment
    -or-
heroku git:remote -a <heroku app name> // only for first deployment
git push heroku master

对于后续部署,npm 脚本 build:heroku 不会删除 git 存储库。只需运行脚本,调整 package.json,然后使用 git 推送到 heroku。

其他几件事

  1. 记得将部署目录添加到主应用程序的 .gitignore 文件中。
  2. 我发现 Dropbox 有时会与 ng build -production 发生冲突。暂停 Dropbox 同步可解决此问题。
  3. angular-cli ng buildng build -production 每次都会重写 dist 文件夹。所以部署后,你必须重建开发环境。我个人使用 ng test 并让它在终端中运行。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2013-03-09
    • 2021-02-19
    • 2017-01-22
    • 1970-01-01
    • 2019-09-16
    • 2013-09-08
    • 1970-01-01
    相关资源
    最近更新 更多