vue 项目自动打包后提交代码到git

没有发布机的情况下，生产环境每次上线打包都需要

• 本地dist在gitignore注释掉，
• 在执行打包命令，
• 再提交dist的代码到git上，
• 在把gitignore的dist修改回去 重复性工作很多。所以可以优化打包流程，从打包到自动提交git。

1. 下载shelljs ，插件可以执行shell脚本，方便打包提交代码的git指令操作。(shelljs是异步执行的) package.json

"build--prod": "node ../../handleDeployer.js production",

2. 先修改gitignore忽略文件，把dist文件放开，再执行build命令，这一步主要就是修改忽略文件，因为node里很多操作都是异步的，所以拆开两个js，也可以合并成一个。 handleDeployer.js

require("shelljs");

console.log("shelljs");
const shell = require("shelljs");
shell.exec(`rm -rf dist/`);
const fs = require("fs");
const path = require("path");

fs.readFile(path.join(__dirname, ".gitignore"), "utf8", function (err, data) {
    if (err) throw err;
    let newContent = data.replace("/projects/crm/dist", 'zhanweifu');
    fs.writeFile(
        path.join(__dirname, ".gitignore"),
        newContent,
        "utf8",
        (err) => {
            if (err) throw err;
            console.log("success done");
            const shell = require("shelljs");
            shell.exec(`node ./build/build.js`);
        }
    );
});

3. 在build.js加判断，如果是生产环境在执行

"use strict";
require("./check-versions")();

// process.env.NODE_ENV = 'production'
process.env.NODE_ENV = process.argv[2];
console.log("process.argv: ", process.argv);
require("shelljs");

// process.env.NODE_ENV = 'production'

const ora = require("ora");
const rm = require("rimraf");
const path = require("path");
const chalk = require("chalk");
const webpack = require("webpack");
const config = require("../config");
const webpackConfig = require("./webpack.prod.conf");
let str =
  process.argv[2] == "testing"
    ? "building for testing..."
    : "building for production...";
const spinner = ora(str);
spinner.start();

rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
  if (err) throw err;
  webpack(webpackConfig, (err, stats) => {
    spinner.stop();
    if (err) throw err;
    process.stdout.write(
      stats.toString({
        colors: true,
        modules: false,
        children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build.
        chunks: false,
        chunkModules: false
      }) + "\n\n"
    );

    if (stats.hasErrors()) {
      console.log(chalk.red("  Build failed with errors.\n"));
      process.exit(1);
    }

    console.log(chalk.cyan("  Build complete.\n"));
    console.log(
      chalk.yellow(
        "  Tip: built files are meant to be served over an HTTP server.\n" +
          "  Opening index.html over file:// won't work.\n"
      )
    );

    // 如果生产环境执行以下命令
    if (process.env.NODE_ENV != "testing") {
      const shell = require("shelljs");
      shell.exec(`git status`);
      shell.exec(`node ./../../deployer.js`);
    }
  });
});

4. 这一步就是打包完成以后执行的方法，主要就是git提交build后的代码，再在gitignore里加上dist文件。 deployer.js

require("shelljs");

console.log("shelljs");

const fs = require("fs");
const path = require("path");

const shell = require("shelljs");
shell.cd(`../../`)
// shell.exec(`git pull`);
shell.exec("git add .", {}, function () {
    shell.exec("git commit -m 'build'", {}, function () {
        shell.exec("git push", {}, function (data) {
            fs.readFile(path.join(__dirname, ".gitignore"), "utf8", function (
                err,
                data
            ) {
                if (err) throw err;
                let newContent = data.replace("zhanweifu", '/projects/crm/dist');
                fs.writeFile(
                    path.join(__dirname, ".gitignore"),
                    newContent,
                    "utf8",
                    (err) => {
                        if (err) throw err;
                        shell.exec("git add .", {}, function () {
                            shell.exec(`git commit -m 'gitignore'`, {}, function () {
                                shell.exec("git push");
                            });
                        });

                    }
                );
            });
        });
    });
})