如何将git修订包含到angular-cli应用程序中？

问题描述：

我需要在我的angular2应用程序的页面上显示git修订版。该项目基于角度cli。如何将git修订包含到angular-cli应用程序中？

如何构建可以扩展，以便将git修订放入例如environment.ts或其他可供应用程序访问的位置？

我猜* Angular-cli *缺少必要的预构建脚本功能。但我想你可能会使用普通的* NPM脚本*。 – Yuri

答

正如@Yuri所建议的那样，我能够通过使用npm脚本解决此问题。

import fs = require('fs'); 
import { Observable } from 'rxjs'; 

let exec = require('child_process').exec; 

const revision = new Observable<string>(s => { 
    exec('git rev-parse --short HEAD', 
     function (error: Error, stdout: Buffer, stderr: Buffer) { 
      if (error !== null) { 
       console.log('git error: ' + error + stderr); 
      } 
      s.next(stdout.toString().trim()); 
      s.complete(); 
     }); 
}); 

const branch = new Observable<string>(s => { 
    exec('git rev-parse --abbrev-ref HEAD', 
     function (error: Error, stdout: Buffer, stderr: Buffer) { 
      if (error !== null) { 
       console.log('git error: ' + error + stderr); 
      } 
      s.next(stdout.toString().trim()); 
      s.complete(); 
     }); 
}); 

Observable 
    .combineLatest(revision, branch) 
    .subscribe(([revision, branch]) => { 
     console.log(`version: '${process.env.npm_package_version}', revision: '${revision}', branch: '${branch}'`); 

     const content = '// this file is automatically generated by git.version.ts script\n' + 
      `export const versions = {version: '${process.env.npm_package_version}', revision: '${revision}', branch: '${branch}'};`; 

     fs.writeFileSync(
      'src/environments/versions.ts', 
      content, 
      {encoding: 'utf8'} 
     ); 
    });

添加预生成钩的package.json：

"scripts": { 
    "ng": "ng", 
    ... 
    "start": "ng serve --proxy proxy-config.json", 
    "prebuild.prod": "ts-node git.version.ts", 
    "build.prod": "ng build -prod", 
    ... 
},

使用所生成的src/environments/versions.ts在

在角度-CLI项目的根定义git.version.ts应用程序。使用一饮而尽替换和git-REV同步添加的哈希和分支上构建

'''ts-node git.version.ts'''命令不起作用，我不知道为什么要这样做： '''你是不是指其中之一？重建前缀 profile''' – George

答

使用一饮而尽任务：

1）创建一饮而尽任务

var gulp   = require('gulp'), 
    replace   = require('gulp-replace'), 
    git    = require('git-rev-sync'), 

gulp.task('git', function() { 
    gulp.src('src/index.html') 
     .pipe(replace('{{git-branch}}', git.branch())) 
     .pipe(replace('{{git-hash}}', git.short())) 
     .pipe(gulp.dest('src/')) 
}); 

// Build Tasks 
gulp.task('build', ['git']);

2）添加下面的代码来的index.html：

{{git-branch}}@{{git-hash}}

3）运行

gulp build

答

只要安装这个包，基于本地的Git仓库构建过程中产生VERSION和COMMITHASH文件 git-revision-webpack-plugin

简单的WebPack插件。

示例代码：

里面你webpack.config.js（或任何开发 - 督促文件）

const GitRevisionPlugin = require('git-revision-webpack-plugin'); 
const gitRevisionPlugin = new GitRevisionPlugin(); 

plugins: [ 
    new DefinePlugin({ 
     'VERSION': JSON.stringify(gitRevisionPlugin.version()), 
     'COMMITHASH': JSON.stringify(gitRevisionPlugin.commithash()), 
     'BRANCH': JSON.stringify(gitRevisionPlugin.branch()), 
    }), 
    ]

在你的模板（角）：

{{ VERSION }} 
{{ COMMITHASH }} 
{{ BRANCH }}

如何在angular-cli项目中公开webpack配置而不弹出？ – Zoidy

抱歉没有明白你的意思。 –

答

我用改性去版本的Vilmantas Baranauskas

我移动src/index.html到src/index.base.html和加入的空<meta name="revision" content="">的HEAD

实施例内：

<head> 
<meta charset="utf-8"> 
<title>MySuperAwesome Angular</title> 
<base href="/"> 

<meta name="viewport" content="width=device-width, initial-scale=1"> 
<meta name="revision" content=""> 
<link rel="icon" type="image/x-icon" href="favicon.ico">

然后改性git.version.ts这样的：

import 'rxjs/add/observable/combineLatest'; 

import { readFileSync, writeFileSync } from 'fs'; 
import { join } from 'path'; 
import { Observable } from 'rxjs/Observable'; 

const indexBasePath = join(__dirname, 'src'); 

const exec = require('child_process').exec; 

const revObs = new Observable<string>(s => { 
    exec('git rev-parse --short HEAD', 
    function (error: Error, stdout: Buffer, stderr: Buffer) { 
    if (error !== null) { 
     console.log('git error: ' + error + stderr); 
    } 
    s.next(stdout.toString().trim()); 
    s.complete(); 
    }); 
}); 

const branchObs = new Observable<string>(s => { 
    exec('git rev-parse --abbrev-ref HEAD', 
    function (error: Error, stdout: Buffer, stderr: Buffer) { 
    if (error !== null) { 
     console.log('git error: ' + error + stderr); 
    } 
    s.next(stdout.toString().trim()); 
    s.complete(); 
    }); 
}); 

Observable 
.combineLatest(revObs, branchObs) 
.subscribe(([revision, branch]) => { 
    console.log(`revision: '${revision}', branch: '${branch}'`); 

    const baseHTML = readFileSync(join(indexBasePath, 'index.base.html'), 'utf8'); 
    const html = baseHTML 
    .replace('<meta name="revision" content="">', `<meta name="revision" content="${ revision }">`); 

    writeFileSync(
    join(indexBasePath, 'index.html'), 
    html, 
    { encoding: 'utf8' } 
); 
});

在本例中只把修改，但你可以更彻底，把你的HTML头部分支和版本

如何将git修订包含到angular-cli应用程序中？

相关推荐