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

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

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

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

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

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

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

• 下载文件

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

• 压缩css

  1from webassets import Bundle
  2from webassets import Environment
  3
  4def asset_css(files):
  5    env = Environment(directory='/tmp', url='/media')
  6    css = Bundle(*files, filters='cssmin', output='/tmp/mine.css')
  7    env.register('css_all', css)
  8    print(env['css_all'].urls())

• 压缩js

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

• 调用

   1css_files = {
   2    "bootstrap.min.css": "https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css",
   3    "font-awesome.min.css": "https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css",
   4    "jquery.fancybox.min.css": "https://cdn.bootcss.com/fancybox/3.1.25/jquery.fancybox.min.css"
   5}
   6
   7js_files = {
   8    "lazysizes.min.js": "https://cdn.bootcss.com/lazysizes/4.0.1/lazysizes.min.js",
   9    "jquery.min.js": "https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js",
  10    "bootstrap.min.js": "https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js",
  11    "particles.min.js": "https://cdn.bootcss.com/particles.js/2.0.0/particles.min.js",
  12    "jquery.fancybox.min.js": "https://cdn.bootcss.com/fancybox/3.1.25/jquery.fancybox.min.js"
  13}
  14
  15def main():
  16    files = []
  17    for name, url in css_files.items():
  18        files.append(write_to_file(name, url))
  19    asset_css(files)
  20
  21    files = []
  22    for name, url in js_files.items():
  23        files.append(write_to_file(name, url))
  24    asset_js(files)
  25
  26
  27if __name__ == '__main__':
  28    main()

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

为避免忘记，特此记录