Automatic upload of front-end code

The H5 project of our company was deployed in the cloud by ourselves after front-end development. Before, we manually uploaded the code after packaging for each development test. In line with the principle that repetitive work can be handed over to the machine, I decided to write a script command to achieve automatic upload;

1. Get started;

Our company uses Ali Cloud; Start with documentation; https://help.aliyun.com/document_detail/32070.html?spm=a2c4g.11186623.6.786.P96P8G; Refer to the documentation to learn that you can use Node to perform uploads in your project;Copy the code
  • 1.1 First configure the script command in the package.json of the project; (The project uses the VUE technology stack)
  • And install ali-OSS plug-in;
"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js"."devbuild": "cross-env NODE_CONFIG=dev node build/build.js && cross-env NODE_CONFIG=dev node file"."build": "cross-env NODE_CONFIG=pro node build/build.js && cross-env NODE_CONFIG=pro node file"
  },
  "devDependencies": {
    "ali-oss": "^ 6.0.0",}Copy the code
  • 1.2 Add a file.js file to the project directory. The specific uploading work of the file is negated;
const fs = require('fs');
const co = require('co'); // Asynchronous process control co module; const path = require('path');
const filePathRoot = path.resolve(__dirname, './dist');
const OSS = require('ali-oss');
const files = [];
const uploadFlagList = [];

let bucket = ' '; // The bucket space name of the OSSlet remotePath = ' '; // Remote OSS file name (as required) const NODE_CONFIG = process.env.node_config;if (NODE_CONFIG == 'dev') {
    bucket = 'xxx';
    remotePath = 'xxx';
} else if (NODE_CONFIG == 'pro') {
    bucket = 'xxx';
    remotePath = 'xxx'; } // Build the OSS object, here you can ask your background or operation and maintenance personnel to open the upload OSS account permission; const client = new OSS({ region:'xxx',
    accessKeyId: 'xxx',
    accessKeySecret: 'xxx', bucket }); (() => {// Recursively fetch after packing./dist folder path of all filesfunction readDirSync(filePath) {
        const filePaths = fs.readdirSync(filePath);
        filePaths.forEach((item) => {
            const cur_path = `${filePath}/${item}`;
            const info = fs.statSync(cur_path);
            if (info.isDirectory()) {
                readDirSync(cur_path);
            } else{ files.push(cur_path); }}); }readDirSync(filePathRoot);
  
    co(function* () {
        try {
            for (letindex = 0; index < files.length; index += 1) { const fileObj = files[index]; // Submit file to OSS, note here, Ali cloud does not need to create a new folder, as long as there is a path, Const result = yield client.put(fileobj.replace (filePathRoot, remotePath), fileObj); uploadFlagList.push(result);if(! result)break; } const uplaodFlag = uploadFlagList.find(item => item.res.statusCode ! = 200);if (uplaodFlag) {
                console.log('Upload failed');            
            } else {
                console.log('Upload successful');            
            } 
        } catch (e) {
            console.log('Upload failed, please check log:', e);
        }
    });
})();

Copy the code

Two. Have fun packing the test.

    "devbuild": "cross-env NODE_CONFIG=dev node build/build.js && cross-env NODE_CONFIG=dev node file"
Copy the code

Execute the package command NPM run devbuild(develop test package, next time, configure output package for different environments and multi-page application output configuration); NODE_CONFIG=dev node file.js file is executed immediately after the project is packaged.

The js recursively traverses the path of all the files in the./dist folder and uploads them to your designated OSS space. If there is a console that failed to upload, it will print log(‘ upload failed! ‘) to remind you;

The common problem is that there is no space name, or the space name is wrong; Upload failed, please check log: Error: Please create a bucket first at Client.proto._objectRequestParams (C:\xxxxx\node_modules\ali-oss\lib\object.js:530:11) at Client.putStream (C:\xxxxxxxxx\node_modules\ali-oss\lib\object.js:122:23) at Client.put (C:\xxxxxx\node_modules\ali-oss\lib\object.js:69:23) at <anonymous>Copy the code