1、前期准备环境

需要安装node，各版本下载地址：http://nodejs.org/dist/

我下载的版本是6.9.5，下载完成解压缩

Windows版本主要是配置node的环境变量，在cmd中输入node -v或者npm -v测试是否安装成功

Linux版本安装方法：

wget http://nodejs.org/dist/v6.9.5/node-v6.9.5-linux-x64.tar.gz

解压缩：sudo tar xvf node-v6.9.5-linux-x64.tar.gz

设置全局变量：

sudo ln -s/usr/local/angular-js/node-v6.9.5-linux-x64/bin/node /usr/local/bin/node

sudo ln -s /usr/local/angular-js/node-v6.9.5-linux-x64/bin/npm/usr/local/bin/npm

输入node -v或者npm -v测试是否配置成功

在angular js包中package.json与bower.json文件的同级目录下执行npm install，npminstall -g bower与bower install

在执行bower install时会报错，提示需要加上--allow-root

bower install ../bower.json --allow-root

我想安装的bower依赖包并不是在bower.json文件的同级目录下的，所以需要加上路径

安装gulp插件：

sudo npm install -g gulp-cli（可能只需要下面两个命令，只是我的gulp只安装下面两个没有成功，就多加了这个cli）

sudo npm install -g gulp（全局安装gulp）

sudo npm install gulp --save-dev（本地安装gulp）

sudo ln -s/usr/local/angular-js/node-v6.9.5-linux-x64/bin/gulp /usr/bin/gulp（配置环境变量）

gulp –v（测试是否安装成功）

第一二个命令是安装全局的gulp，第三个是安装本地的gulp，并把插件版本插入到package.json文件中，之后执行npm install就能自动安装gulp

2、创建gulpfile.js

在gulpfile.js文件中编写打包的各种命令，我目前只用了清空、合并压缩css/js、合并压缩angular js、合并替换js/css路径及文件，并将所有需要的文件写入build目录下

清空基本格式：

var gulp = require('gulp');
var del = require('del');
gulp.task('clean', function() {
	return del(['src/build']);
});

所有写在require中的插件在运行前都需要手动安装，安装格式为 npm install del --save-dev

上述的作用就是删除build目录，task命令里面的值就是执行的名字，具体执行方法为：gulp clean

也可以将多个task合起来执行，具体代码如下：

//defualt
var runSequence = require('run-sequence');
gulp.task('default', function(callback){
	runSequence(
		'clean',
		'deployCSS',
		['deploymenujs',
		'deployappjs'],//[]中的表示并行运行
		'userefbower',
		'copy',
		callback);
});

执行方法：gulp default 或者执行输入gulp进行执行

这边用了一个插件叫run-sequence，是用来规定gulp运行顺序的，默认情况下gulp运行task是并行方式运行的，不会按照你写的顺序进行

默认情况下default并行运行代码：

gulp.task('default', [
        'clean',
	'deployCSS',
	'deploymenujs',
	'deployappjs',
	'userefbower',	
	'copy'])

合并压缩css文件： 

//css合并及压缩
var gulp = require('gulp');
var concat = require('gulp-concat');
var cssmin = require('gulp-cssmin');
gulp.task('deployCSS', function(){
	return gulp.src(paths.css)//需要进行压缩的css文件路径
	.pipe(cssmin())//压缩css文件
	.pipe(concat('all.min.css'))//合并css文件未all.min.css
	.pipe(gulp.dest('src/build/css'));//输出文件路径
});
上述代码中的paths.css都定义在一个paths变量中，获取方式就是paths.css： 

//设置path路径
var paths = {
	js: ['src/menu-module/*.js'],
	css: ['src/css/*.css'],
	json: ['src/menu-module/*.json'],
	templates: ['src/build/**/templates.js'],
	buildjs: ['src/build/menu-module/*.js'],
	buildcss: ['src/build/css/*.css'],
	menujs: ['src/menu-module/menu.module.js','src/menu-module/menu.component.js','src/menu-module/*controller.js'],
	appjs: ['src/app.*.js'],
	buildmenujs: ['src/build/menu-module/*.js'],
	buildappjs: ['src/build/*.js']

};

合并压缩js文件： 

//deploy
gulp.task('deployJS', function(){

		return gulp.src(paths.js)
		.pipe(concat('all.min.js'))
		.pipe(uglify())//js压缩方法
		.pipe(gulp.dest('src/build/menu-module'));
	
});
uglify也需要进行定义及安装后才能使用

合并压缩angular js文件：

//menujs压缩
var ngAnnotate = require('gulp-ng-annotate');//angularjs文件添加变量定义
var sourcemaps = require('gulp-sourcemaps');
var stripDebug = require('gulp-strip-debug');
gulp.task('deploymenujs', function(){
		return gulp.src(paths.menujs)
		.pipe(sourcemaps.init())//不知道什么用处
		.pipe(ngAnnotate())
		.pipe(stripDebug())//不知道什么用处
		.pipe(concat('menu.min.js'))
		.pipe(uglify())
		.pipe(sourcemaps.write())//不知道什么用处
		.pipe(gulp.dest('src/build/menu-module'));

});
angular js文件的压缩方式与一般的js文件其实差不多，但是只使用一般js的压缩方式会找不到angular定义，所以需要添加gulp-ng-annotate插件，自动将需要的变量进行定义（其实具体实现方式我也不是很清楚，但是angular js文件加上这个插件后的确可以使用了orz）

合并替换HTML文件中的js/css路径：

HTML文件中需要添加注释表明需要合并替换的文件，使用<!-- build:文件格式js/css  合并后路径><!-- endbuild -->作为标记，如果只是需要进行删除则用<!-- build:remove --><!-- endbuild -->作为标记。

index.html

<!doctype html>
<html lang="en" data-ng-app="mainApp">

<head>
    <meta charset="utf-8">
    <title>Ontology Viewer</title>
    <!-- build:css bower/bower.min.css -->
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
    <!-- endbuild -->
    <!-- build:css css/all.min.css -->
    <link rel="stylesheet" href="css/menu.css" />
    <!-- endbuild -->
    <!-- build:js bower/bower.min.js -->
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
    <script src="bower_components/angular-resource/angular-resource.js"></script>
    <script src="bower_components/angular-strap/dist/angular-strap.min.js"></script>
    <script src="bower_components/angular-strap/dist/angular-strap.tpl.min.js"></script>
    <script src="bower_components/jquery/dist/jquery.js"></script>
    <!-- endbuild -->
    <!-- build:remove -->
    <script src="app.module.js"></script>
    <script src="app.router.js"></script>
    <!-- endbuild -->
    <!-- build:remove -->
    <script src="menu-module/menu.module.js"></script>
    <script src="menu-module/menu.component.js"></script>
    <script src="menu-module/exit.controller.js"></script>
    <script src="menu-module/preference.controller.js"></script>
    <!-- endbuild -->
</head>

<body>
    <menu-module></menu-module>
    <div class="view" ui-view></div>
</body>

</html>

使用useref进行替换

gulpfile.js

var useref = require('gulp-useref');
var gulpif = require('gulp-if');
gulp.task('userefbower', function() {
	return gulp.src('src/index.html')
	.pipe(useref())
	.pipe(gulpif('*.js',ngAnnotate()))//使用gulpif做判断，格式为gulpif(条件,true,false)，可省略
	.pipe(gulpif('*.js',uglify()))
	.pipe(gulpif('*.css', cssmin()))
	.pipe(gulp.dest('src/build/'));
});


复制文件

一些不需要进行任何修改的文件可以直接进行复制到build目录下

//copy
gulp.task('copy', function(){
	gulp.src('src/menu-module/*.json')
	.pipe(gulp.dest('src/build/menu-module'));
	gulp.src('src/menu-module/*.html')
	.pipe(gulp.dest('src/build/menu-module'));
});

我的完整gulpfile.js


var gulp = require('gulp');
var concat = require('gulp-concat');
var ngAnnotate = require('gulp-ng-annotate');
var uglify = require('gulp-uglify');
var sourcemaps = require('gulp-sourcemaps');
var stripDebug = require('gulp-strip-debug');
var useref = require('gulp-useref');
var gulpif = require('gulp-if');
var usemin = require('gulp-usemin');
//设置path路径
var paths = {
	js: ['src/menu-module/*.js'],
	css: ['src/css/*.css'],
	json: ['src/menu-module/*.json'],
	templates: ['src/build/**/templates.js'],
	buildjs: ['src/build/menu-module/*.js'],
	buildcss: ['src/build/css/*.css'],
	menujs: ['src/menu-module/menu.module.js','src/menu-module/menu.component.js','src/menu-module/*controller.js'],
	appjs: ['src/app.*.js'],
	buildmenujs: ['src/build/menu-module/*.js'],
	buildappjs: ['src/build/*.js']

};


//编译js代码
var jshint = require('gulp-jshint');
gulp.task('jshint', function() {
	gulp.src(paths.js)
	.pipe(jshint())
	.pipe(jshint.reporter('default'));
});

//clean build文件夹
var del = require('del');
gulp.task('clean', function() {
	return del(['src/build']);
});


//menujs压缩
gulp.task('deploymenujs', function(){
		return gulp.src(paths.menujs)
		.pipe(sourcemaps.init())
		.pipe(ngAnnotate())
		.pipe(stripDebug())
		.pipe(concat('menu.min.js'))
		.pipe(uglify())
		.pipe(sourcemaps.write())
		.pipe(gulp.dest('src/build/menu-module'));

});
//appjs压缩
gulp.task('deployappjs', function(){
		return gulp.src(paths.appjs)
		.pipe(sourcemaps.init())
		.pipe(ngAnnotate())
		.pipe(stripDebug())
		.pipe(concat('app.min.js'))
		.pipe(uglify())
		.pipe(sourcemaps.write())
		.pipe(gulp.dest('src/build'));

});


//js压缩
//dev
gulp.task('js', function(){
		return gulp.src(paths.js)
		.pipe(concat('all.js'))
		.pipe(gulp.dest('src/build/menu-module'));

});
//deploy
gulp.task('deployJS', function(){

		return gulp.src(paths.js)
		.pipe(sourcemaps.init())
		.pipe(ngAnnotate())
		.pipe(stripDebug())
		.pipe(concat('all.min.js'))
		.pipe(uglify())
		.pipe(sourcemaps.write())
		.pipe(gulp.dest('src/build/menu-module'));
	
});


//css合并及压缩
var cssmin = require('gulp-cssmin');
gulp.task('deployCSS', function(){
	return gulp.src(paths.css)
	.pipe(cssmin())
	.pipe(concat('all.min.css'))
	.pipe(gulp.dest('src/build/css'));
});

//copy
gulp.task('copy', function(){
	gulp.src('src/menu-module/*.json')
	.pipe(gulp.dest('src/build/menu-module'));
	gulp.src('src/menu-module/*.html')
	.pipe(gulp.dest('src/build/menu-module'));
});


//bower js css

gulp.task('userefbower', function() {
	return gulp.src('src/index.html')
	.pipe(useref())
	.pipe(gulpif('*.js',ngAnnotate()))
	.pipe(gulpif('*.js',uglify()))
	.pipe(gulpif('*.css', cssmin()))
	.pipe(gulp.dest('src/build/'));
});




//default
var runSequence = require('run-sequence');
gulp.task('default', function(callback){
	runSequence(
		'clean',
		'deployCSS',
		'deploymenujs',
		'deployappjs',
		'userefbower',
		'copy',
		callback);
});


ps: 因为我的项目中没有普通的js文件，所以没有做js的合并压缩及编译动作
最后的执行代码为：gulp default

3、jenkins构建

新建一个自由风格的job

添加shell的执行脚本：

//杀死node的进程，因为我没有找到如何停止node的命令就只能简单粗暴一点了，网上说可以执行npm stop来停止，但是stop中的代码要写在package.json文件中，可是我们的启动方式是http-server的，我也不知道应该怎么写，放弃了等以后再说。

if test $(ps -ef|grep node_modules/http-server/bin/http-server|grep -v grep |wc -l) -eq 1
then
ps -ef|grep node_modules/http-server/bin/http-server|grep -v grep |cut -c 9-15|xargs sudo kill -s 9
echo "------------npm killing--------------"
echo ps -ef|grep node_modules/http-server/bin/http-server|grep -v grep |wc -l
else
echo "------------node not run------------"
echo ps -ef|grep node_modules/http-server/bin/http-server|grep -v grep |wc -l
fi
//更新并启动 

cd /usr/local/coding/OntologyViewer
sudo git fetch --all
sudo git reset --hard origin/master
sudo git pull
cd client
sudo npm install
cd src
bower install ../bower.json --allow-root
cd /usr/local/coding/OntologyViewer/client
//打包执行
sudo gulp default 
//后台运行
sudo daemonize -E BUILD_ID=dontKillMe -o start.log -c /usr/local/coding/OntologyViewer/client  /usr/local/coding/OntologyViewer/client/npm-start.sh

因为我的angular项目代码是放在git上的，所以前四句是用来更新git代码到本地的，并且忽略所有本地的更改直接覆盖

git更新代码后更新npm及bower的依赖包，进行gulp打包操作，最后执行保存在npm-start.sh文件中的npm start命令启动npm

这边我用了daemonize插件，是因为在jenkins中直接运行npm start命令不能结束一个job的构建，所以我们需要在后台运行npm的命令

daemonize需要先安装才能使用，具体使用方法我也只会上面这一句

sudo wget https://github.com/bmc/daemonize/archive/release-1.7.7.zip
unzip release-1.7.7.zip
mv release-1.7.7 daemonize
cd daemonize
sudo ./configure
sudo make && sudo make install
sudo ln -s /usr/local/angular-js/daemonize/daemonize /usr/local/bin/daemonize


最后点击jenkins立即构建，就自动打包并运行啦。



# angular
Logo
向您推荐>>Eolink开发者社区

权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区

更多推荐

深入理解 Mocha 测试框架：从零实现一个 Mocha

前言什么是自动化测试自动化测试在很多团队中都是Devops环节中很难执行起来的一个环节，主要原因在于测试代码的编写工作很难抽象，99%的场景都需要和业务强绑定，而且写测试代码的编写工作量往往比编写实际业务代码的工作量更多。在一些很多业务场景中投入产出比很低，适合写自动化测试的应该是那些中长期业务以及一些诸如组件一样的基础库。自动化测试是个比较大的概念，其中分类也比较多，比如单元测试，端对端测试，集

avatar 云原生

ELK实现containerd的容器日志采集展示【基于logging的全栈监测】

企业级ELK Stack构建介绍

avatar 云原生

(20200916 Solved)docker-compose up创建容器自动退出

问题描述如题，创建容器后自动退出了。并且docker start container无效解决方案原因是缺失了控制终端的配置，需要在docker-compose.yml中增加tty:true ，有时候这样也不行，需要再增加一个command:/bin/bash，命令不一定是这个，需要是一个不会退出的命令，然后用-d后台启动容器。Referencesdocker-compose启动容器后自动退出...

avatar 云原生