博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js 压缩
阅读量:4324 次
发布时间:2019-06-06

本文共 3340 字,大约阅读时间需要 11 分钟。

  听到同事说没找到压缩js文件的,说软件压缩貌似有点问题,我自己就用nodejs练手般写了压缩文件的。

  主要的思路就是,先通过前端上传js文件,然后服务器接收,然后引用uglifyjs 压缩,再返回文件路径给前端下载即可。代码如下:

  html:

  
js压缩工具

 

  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 = nullapp.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解决咯

转载于:https://www.cnblogs.com/ylHeyden/p/9531940.html

你可能感兴趣的文章
Python 列表基本操作
查看>>
Linux TC基于CBQ队列的流量管理范例
查看>>
Python hashlib and hmac
查看>>
Fitnesse Page 简单使用
查看>>
C#.net 创建XML
查看>>
1057 数零壹
查看>>
隐马尔科夫模型(上)
查看>>
asp.net mvc FluentValidation 的使用
查看>>
java JvM
查看>>
HDU 1009 Just a Hook
查看>>
python基础之数据类型
查看>>
CSS居中初探
查看>>
element-ui table 点击分页table滚动到顶部
查看>>
UVa 1585 Score 得分 题解
查看>>
洛谷 P2197 nim游戏
查看>>
Linux中对为本去重
查看>>
layui下拉框数据过万渲染渲染问题解决方案
查看>>
有序列表和无序列表
查看>>
Bootstrap文档
查看>>
【翻译】在Ext JS集成第三方库
查看>>