Bowen Huang

学习,进步!记录学习的过程,分享知识。

导航

适用于nodercms的打包构建脚本

Posted on 2019-03-28 16:22  Bowen Huang  阅读(762)  评论(0编辑  收藏  举报

背景

最近自己用nodercms搭建了一个简单的博客系统,用户发布一些自己谁便谢谢的文章。感谢nodercms团队,这个cms轻量易用,用于做个人博客太方便了。
开发了博客系统,肯定设计到部署到AWS或者阿里云等服务器上,那么,打包脚本就是必须的,这里,我自己修改了原有的gulp脚本,添加了打包脚本,实现了一键编译打包。这里就简单的介绍一下。

源文件地址

https://gitlab.com/BowenHBX/nodercms-build-deploy

 

依赖

"del": "^2.2.0",
"gulp": "^3.8.11",
"gulp-angular-templatecache": "^1.8.0",
"gulp-autoprefixer": "^3.1.0",
"gulp-clean-css": "^2.0.6",
"gulp-concat": "^2.5.2",
"gulp-less": "^3.0.5",
"gulp-plumber": "^1.0.0",
"gulp-uglify": "^1.5.2",
"gulp-util": "^3.0.7",
"shelljs": "^0.7.8",
"run-sequence": "^2.0.0",

 

完善gulp脚本

其实nodercms团队的gulp编译脚本已经很完善了,我这里只是提取有用的文件并复制到一个临时文件夹下

/**
* 拷贝编译好的资源
*/
gulp.task('copy_other_files', function() {
gulp.src([
'./bin/**',
'./config/**',
'./core/**/*',
'./lib/**',
'./install.lock',
'./*.js',
'./*.json',
'./public/*.*',
'./public/assets/**',
'./public/themes/**',
'./README.md',
'!./config/database.config.js'
], { base: './' })
.pipe(gulp.dest('tmp'))
});

 

简单说明:

./bin/** : nodercms启动文件存放目录

./config/** : 所有配置文件

!./config/database.config.js : 排除数据库配置,避免覆盖生产环境的数据库配置

其他的目录为node文件和资源模板文件

以上copy_other_files任务会将所有网站运行的必要文件复制到根目录的/tmp/文件加下

 

添加清除脚本

每次构建前我们都希望tmp文件是空的,避免有多余的旧文件保留

/**
* 清除 tmp
*/
gulp.task('cleanTmp', function(cb) {
    return del(['./tmp'], cb);
});

 

修改build任务

/**
* 生产模式编译
*/
gulp.task('build', cb =>
    runSequence(
    'cleanTmp',
    [
        'build-admin-assets-less',
        'concat-vendor-js-less',
        'concat-vendor-css-less',
        'concat-admin-js-less',
        'concat-admin-views',
        'copy-admin-assets',
        'copy-admin-font-awersome-fonts',
    ],
    'copy_other_files',
    cb
    )
);        

 

这里使用了“run-sequence”插件,该插件是为了让任务同步执行:

  • 清除tmp文件夹
  • 编译文件
  • 复制所有文件到tmp文件夹

到这里整个网站执行需要的文件就都在tmp文件夹下面了,接下来就是打包的工作

打包

在根目录添加文件夹build,在build中添加两个文件:deploy.js, deploy.sh,如下:

build.js文件如下:

const shell = require('shelljs');
const path = require('path');
const pkgInfo = require('../package.json');

(function() {
  const appName = pkgInfo.name;
  const version = pkgInfo.version;

  console.log(`deploy app name: ${appName}`);

  // 版本号合法检查
  if (!version) {
    console.log('not ci tag or not params, don\'t pack!!!');
    return;
  }

  // 进行打包
  deploy(`${appName}-${version}`);

  // 调用发布shell
  function deploy(fileName) {
    shell.exec(`sh ../build/deploy.sh ${fileName}`, { cwd: path.resolve(__dirname, '../tmp/'), async: true });
  }
}());

 

代码很简单:

  • 使用${appName}-${version}组成包的文件名
  • 使用shell执行deploy.sh脚本,将/tmp/目录里面的文件打包成${fileName}

shell脚本,deploy.sh的代码如下:

#!/usr/bin/env bash

PACK_NAME="$1.tgz"

echo ">>> Installing prod dependencies..."
npm i --production
echo "<<<"
echo ""

echo ">>> Packing..."
touch $PACK_NAME;
mkdir logs
cd logs
mkdir access && mkdir database && mkdir errors && mkdir system
cd ../
tar -czf ./$PACK_NAME --exclude=$PACK_NAME .
echo "Package: $PACK_NAME"
echo "<<<"
echo ""

echo ">>> Show Package's Size..."
ls -lh
echo "<<<"
echo ""

echo ">>> copy file"
cd ../
mkdir pack
mv tmp/$PACK_NAME pack/
echo "<<<"
echo ""

 

这一部分的脚本也很好理解:

  1. 文件名为deploy.js里面的fileName加上".tgz"
  2. 创建文件夹logs,并且创建子目录access,database,errors,system(这一步很重要,不然启动的时候可能报权限错误,当然可以使用chmod 777 xxx来修改站点目录权限)
  3. 打包文件
  4. 输出文件大小
  5. 将打包的文件复制到/pack/文件夹下

修改package.json文件scripts配置

"scripts": {
    "start": "node ./bin/www &",
    "build:dev": "gulp default",
    "build:prod": "gulp build",
    "deploy:prod": "gulp build && node build/deploy.js prod"
  }


当执行deploy:prod后,一个*.tgz文件就生成了,在/pack/目录下;

上传文件到服务器,解压,进入更目录,执行以下脚本nodercms就启动了

$ npm start

到此,这个简单的构建脚本介绍就结束啦!

尊重知识产权,转载请说明出处!