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全生命周期开发者社区

更多推荐

沃云统一开发平台介绍

沃云集成平台研发平台介绍1.平台优势2.平台原理3.研发平台使用方法4.遇到的问题5.现阶段实现的功能6.后续需要补充的功能和优化内容研发平台介绍1.平台优势解决孤岛式应用，实现能力共享；现有系统框架过于复杂，跨系统业务处理成本居高不下，协同服务共享，降低运维成本；提高项目应用资源监控能力，改善资源利用率；业务微服务化，快速发布、快速部署，快速响应业务需求变化；沃云平台不仅提供了自动化的、可快速部

avatar 云原生

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

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

avatar 云原生

基于docker的test-containers环境百宝箱

笔者语录： 我开了个公众号【Java你我他】，欢迎大家关注。  在很多时候，程序猿们更关注代码本身，而不愿意把时间花费在环境搭建上，这也是Docker变得越来越受欢迎的原因之一。test-containe是Docker生态圈中的一颗新星，其 主要针对测试领域、背靠Docker实现环境百宝箱功能。  test-containers： 你要的环境，我都有~  假设我们现在需要一个redis-clust

avatar 云原生