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

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

这里写图片描述

#使用:
npm run build

# 目录结构:
build/
  |- static-resource-packaging.js
dist/
static/
  |- css/
    |- common.min.css
  |- js/
    |- common.min.js
    |- plugins.min.js
package.json

# static-resource-packaging.js
/**
 * 静态资源归类,打包,上传
 * Create by Capricorncd 2017-09-25
 */
// 依赖安装
// npm install needle tar tar.gz --save

var 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
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值