Question

使用angular-cli和自定义快速服务器，我将一个基本的Angular2应用程序部署到heroku。运行ng build非常适合编译所有Angular文件，以及我添加到src和公共目录的文件。但是，我必须手动添加一些文件，并在运行ng build时将其删除。

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

是否可以扩展ng build以忽略或添加dist目录中的文件？

Answer 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可能会在部署期间尝试运行其他一些角度npm脚本。

然后我进入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脚本构建：heroku不会删除git存储库。只需运行脚本，调整package.json，然后使用git推送到heroku。

很少有其他事情

请记住将部署目录添加到主应用程序的.gitignore文件中。
我发现Dropbox有时会导致与ng build -production冲突。暂停Dropbox同步可以解决问题。
angular-cli ng build或ng build -production每次都会重写dist文件夹。因此，在部署之后，您必须重建开发环境。我个人使用ng测试并让它在终端上运行。

扩展angular-cli ng构建以忽略git存储库？

1 个答案: