npm scrpit/node实现静态资源(js/css)复制重命名(版本号)、压缩tar.gz、上传至服务器

来源：互联网发布：知豆电动汽车官方电话编辑：程序博客网时间：2024/05/20 22:38

使用场景：一些插件js包、css样式包等文件较大。由于服务器带宽（1M）限制，每次加载时相当慢，偶尔还能达到20s。所以将静态资源另外部署到第三方平台，如腾讯云对象存储、阿里云、CND等等，后期根据相关接口获取版本号及相关静态资源地址…
具体流程：

这里写图片描述

#使用：

npm run build

# 目录结构：

build/  |- static-resource-packaging.jsdist/static/  |- css/    |- common.min.css  |- js/    |- common.min.js    |- plugins.min.jspackage.json

# static-resource-packaging.js

/** * 静态资源归类，打包，上传 * Create by Capricorncd 2017-09-25 */// 依赖安装// npm install needle tar tar.gz --savevar fs = require('fs');var targz = require('tar.gz')();var needle = require('needle');// 版本号// 可随机生成，也可手动配置（或从package.json中读取）var version = '201509251522';// 待拷贝的文件（需要版本号，后期需要初始化加载的静态资源）// FILES_HAS_VER属性：静态资源原目录// FILES_HAS_VER属性值：静态资源需要拷贝到的目录var FILES_HAS_VER = {    'static/css/common.min.css': './dist/static/css/common.min.css',    'static/js/plugins.min.js': './dist/static/js/plugins.min.js',    'static/js/common.min.js': './dist/static/js/common.min.js'};// 需要创建的目录var NEED_CREATE_DIRECTORY = [    './dist/static',    './dist/static/js',    './dist/static/css'];// 清空dev/static目录// 打包前先清空目录，防止旧版本文件存在deleteFolder('./dist/static');// 创建目录(同步任务)createDirectory(NEED_CREATE_DIRECTORY);// 复制文件到指定目录(需要重命名)copyFile(FILES_HAS_VER, function (paths) {    // 生成压缩包的名称    var targzFile = './dist/statics.'+ version +'.tar.gz';    // 创建压缩包/压缩文件夹    compressDirectory('./dist/static', targzFile, function () {        console.log('版本号：' + version);        console.log('静态文件：');        console.log(paths);        // 向服务器发送压缩包文件        // 读取文件        var buffer = fs.readFileSync(targzFile);        // 接口参数        var params = {            class: 'Mainten', // 与后台约定的接口参数            method: 'upstatic', // 与后台约定的接口参数            data: JSON.stringify({ver: version, paths: paths}),            // needle 上传文件配置            zip_file: {                buffer       : buffer,                filename     : targzFile.split('/').pop(),                content_type : 'application/octet-stream'            }        }        // 上传（相当于提交multipart/form-data表单）        // needle 详细说明，请见github        // https://github.com/tomas/needle        needle.post('http://192.168.5.52:8787', params,  { timeout: 60000, multipart: true }, function (err, resp, body) {            console.log('err -----------------------------------');            console.log(err);            // console.log('resp -----------------------------------');            // console.log(resp);            console.log('body -----------------------------------');            // 上传成功，服务器返回body结构（字符串）            // {code: 0, msg: 'success!'}            try {                // 尝试转换为js对象                body = JSON.parse(body);            } catch (e) {}            console.log(body);            if (body && body.code === 0) {                // 删除本地targzFile压缩文件                var unlink = fs.unlinkSync(targzFile);                if (!unlink) {                    console.log('删除成功: '+ targzFile);                } else {                    console.log('删除失败: '+ targzFile);                    console.log(unlink);                }            } else {                console.log('没有删除压缩包 '+ targzFile);            }            console.log('complation -----------------------------------');        });    });});/** * 删除目录及文件夹 * @param directoryPath 文件夹路径 */function deleteFolder(directoryPath) {    var files = [];    if (fs.existsSync(directoryPath)) {        files = fs.readdirSync(directoryPath);        files.forEach(function (file, index) {            var curPath = directoryPath + "/" + file;            if (fs.statSync(curPath).isDirectory()) { // recurse                deleteFolder(curPath);            } else { // delete file                fs.unlinkSync(curPath);            }        });        fs.rmdirSync(directoryPath);    }};/** * 创建目录 * @param arr 需要创建的目录列表数组 */function createDirectory(arr) {    for (var i = 0; i < arr.length; i++) {        if (!fs.existsSync(arr[i])) {            fs.mkdirSync(arr[i]);        }    }}/** * 拷贝文件 && 重命名 * @param arr 需要拷贝的文件列表数组 * @param callback 回调函数 */function copyFile(obj, callback) {    // 需要加载的文件路径    var paths = [];    // 处理计数    var count = 0;    // 对象长度    var len = 0;    for (var p in obj) {        len++;    }    for (var src in obj) {        // 目标文件名,将压缩文件的'.min.'改为'.版本号.'        var dst = obj[src].replace('.min.', '.'+ version +'.');        // 读取文件        _readFile(src, dst);    }    // 读取文件    function _readFile(src, dst) {        fs.readFile(src, function (err, data) {            if (err) {                console.log(err);            } else {                _writeFile(dst, data);            }        })    }    // 写入文件    function _writeFile(dst, data) {        fs.writeFile( dst, data, function (error) {            if (error) {                throw error;            } else {                console.log("文件已保存 " + dst);            }            count++;            // 如果文件拷贝完成，回调            if (count === len) {                callback && callback(paths);            }        });    }}/** * 压缩文件夹 * @param dir 被压缩的目录文件夹 * @param fileName 生成压缩文件的地址及名称 * @param callback 回调 */function compressDirectory(dir, fileName, callback) {    // 被压缩文件夹    var read = targz.createReadStream(dir);    // 写入文件    var write = fs.createWriteStream(fileName);    // Let the magic happen    read.pipe(write);    // 压缩包创建完成    read.on('end', callback);};

# package.json

{  "name": "static-resource-packaging",  "version": "1.0.0",  "description": "",  "author": "Capricorncd",  "scripts": {    "build": "node build/static-resource-packaging.js"  },  "dependencies": {    "needle": "^2.0.1",    "tar": "^4.0.1",    "tar.gz": "^1.0.5"  },  "engines": {    "node": ">= 4.0.0",    "npm": ">= 3.0.0"  }}

至此，静态资源复制重命名压缩及上传就完成。
http://blog.csdn.net/Yagizacd/article/details/78095761
关于静态资源预加载方法封装，估计会在github发布…
https://github.com/capricorncd

阅读全文

0 0