从远程url下载并压缩js,css

之前一直在使用bootcdn.cn提供的CDN服务，没出过什么大问题，即使国庆第一天凌晨挂过，对它依旧信任。

但事与愿违，无意中打开查看源码，才发现竟然有那么多的css，js文件

<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/fancybox/3.1.25/jquery.fancybox.min.css" rel="stylesheet">

<script src="https://cdn.bootcss.com/lazysizes/4.0.1/lazysizes.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/particles.js/2.0.0/particles.min.js"></script>
<script src="https://cdn.bootcss.com/fancybox/3.1.25/jquery.fancybox.min.js"></script>

作为强迫症有些受不了，想要把这些合并成一个css文件或js文件

首先找到熟悉的python的webassets，但发现只能使用本地文件，又不想一个文件一个文件的下载下来，所以写了一段简单的代码，把下载文件并压缩文件合到一起

下载文件

def write_to_file(name, url):
    resp = requests.get(url)
    path = os.path.join("/tmp", name)
    with open(path, "w") as f:
        f.write(resp.text)
    return name

压缩css

from webassets import Bundle
from webassets import Environment

def asset_css(files):
    env = Environment(directory='/tmp', url='/media')
    css = Bundle(*files, filters='cssmin', output='/tmp/mine.css')
    env.register('css_all', css)
    print(env['css_all'].urls())

压缩js

def asset_js(files):
    env = Environment(directory='/tmp', url='/media')
    css = Bundle(*files, filters='jsmin', output='/tmp/mine.js')
    env.register('js_all', css)
    print(env['js_all'].urls())

调用

css_files = {
    "bootstrap.min.css": "https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css",
    "font-awesome.min.css": "https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css",
    "jquery.fancybox.min.css": "https://cdn.bootcss.com/fancybox/3.1.25/jquery.fancybox.min.css"
}

js_files = {
    "lazysizes.min.js": "https://cdn.bootcss.com/lazysizes/4.0.1/lazysizes.min.js",
    "jquery.min.js": "https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js",
    "bootstrap.min.js": "https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js",
    "particles.min.js": "https://cdn.bootcss.com/particles.js/2.0.0/particles.min.js",
    "jquery.fancybox.min.js": "https://cdn.bootcss.com/fancybox/3.1.25/jquery.fancybox.min.js"
}

def main():
    files = []
    for name, url in css_files.items():
        files.append(write_to_file(name, url))
    asset_css(files)

    files = []
    for name, url in js_files.items():
        files.append(write_to_file(name, url))
    asset_js(files)


if __name__ == '__main__':
    main()

然后把压缩的mine.css和mine.js上传到云存储，测试后发现一切正常，唯有font-awesome缺少字体，下载字体后手动上传到css文件的相对目录../fonts即可

为避免忘记，特此记录

lin.jiang