使用场景:一些插件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