标签:uglifyjs events res function result port nodejs 工具 str
听到同事说没找到压缩js文件的,说软件压缩貌似有点问题,我自己就用nodejs练手般写了压缩文件的。
主要的思路就是,先通过前端上传js文件,然后服务器接收,然后引用uglifyjs 压缩,再返回文件路径给前端下载即可。代码如下:
html:
<div> <div class="content"> <span>js压缩工具</span> <form id="uploadFiles" enctype="multipart/form-data"> <input type="file" id=‘uglifyJs‘ multiple="multiple" name="js_min"> <input type="hidden" name="test" value="heyden"> </form> <button id="upload">压缩</button> </div> </div>
js 脚本
$(function() { var baseUrl = location.hostname $("#upload").click(function() { $.ajax({ url:`http://${baseUrl}:8084/upload`, type:‘POST‘, data: new FormData($(‘#uploadFiles‘)[0]), processData:false, contentType:false, success: function(res) { res.fileData.forEach(item => { let elDown = document.createElement(‘a‘), e = document.createEvent("MouseEvents"); //创建鼠标事件对象 e.initEvent("click", false, false); //初始化事件对象 elDown.href = item.downUrl elDown.download = item.fileName; elDown.dispatchEvent(e); //给指定的元素,执行事件click事件 }); }, error: function() { } }) }) })
这里ajax请求时。processData,contentType这两个记得填,否则会被坑
nodejs :
const express = require(‘express‘); const app = express() const formidable = require(‘formidable‘); const fs = require(‘fs‘) const path = require(‘path‘) const UglifyJS = require(‘uglify-js‘) const multiparty = require(‘multiparty‘); let form = null app.use(express.static(‘static‘)) app.get(‘/‘, function(req, res) { res.sendfile(‘index.html‘) }) app.post(‘/upload‘, function(req, res) { form = new multiparty.Form(); form.uploadDir = ‘static/tmp‘ form.maxFieldsSize = 1 * 1024 * 1024; var targetDir = path.join(__dirname, ‘/static/upload‘) fs.access(targetDir, function (err) { if (err) { fs.mkdir(targetDir); } _fileSave(req, res, targetDir) }) }) app.listen(8084, "0.0.0.0" ,() => { console.log(‘succcess in port 8084‘); }) function _fileSave(req, res, target) { form.parse(req, function (err, fields, files) { if (err) throw err var fileData = []; var errCount = 0; var keys = files.js_min var miniJs = [] keys.forEach(function(key, index) { var filePath = key.path; var fileExt = filePath.substring(filePath.lastIndexOf(‘.‘)); if ((‘.js.txt‘).indexOf(fileExt.toLowerCase()) === -1) { errCount += 1; } else { var fileName = fileExt; var targetFile = target + ‘/‘ + key.originalFilename ; var fileUrl = req.originalUrl +"/"+ key.originalFilename //移动文件 miniJs.push(UglifyJS.minify(fs.readFileSync(filePath, ‘utf8‘))) fs.writeFileSync(targetFile, miniJs[index].code, "utf8") fs.unlinkSync(filePath); // 文件的Url(相对路径) fileData.push({ target: targetFile, downUrl: fileUrl, fileName: key.originalFilename}) } }) res.json({ fileData: fileData, success: keys.length - errCount, error: errCount, result: miniJs}); }) }
写服务时,接收前端的文件时,调接口时,form 对象记得调一次就new一个,否则会报错。,,获取前端文件后,只需用UglifyJS处理,然后重命名临时文件即可,最后返回
文件url给前端,让前端自己下载。这里我也不知道怎么直接让前端自动下载,貌似通过请求不好下载,自己也没找到方法,求靠前端js解决咯
标签:uglifyjs events res function result port nodejs 工具 str
原文地址:https://www.cnblogs.com/ylHeyden/p/9531940.html