Minify all CSS and Javascript in a directory

Question

I am trying to make a python script that will package the contents of a directory and minify all of the JavaScript and CSS scripts.

If I used the code below (bottom of the post), and the directory structure inside of theme_files was such:

\
 |-assets\
 |        |-css\
 |        |     |-theme.css
 |        |     |-stylesheet.css
 |        |
 |        |-js\
 |        |    |-theme.js
 |        |    |-page.js
 |
 |-index.html

(Is there a better way to do that?)

It would output the whole directory structure into the generated .pak file properly. However, the minified css and javascript files have no content inside of them other than their own file name.

Example: the content of the file (supposedly minified) theme.css would be "theme.css"

That's it. Nothing else. One line.

Any idea what I'm doing wrong?

import io
import os
import zipfile
import rcssmin
import rjsmin

pakName = input("Theme Name: ").replace(" ", "_").lower()

themePak = zipfile.ZipFile(pakName +".tpk", "w")

for dirname, subdirs, files in os.walk("theme_files"):
    themePak.write(dirname)
    for filename in files:
        if not filename.endswith((".css", ".js")):
            themePak.write(os.path.join(dirname, filename))

        if filename.endswith(".css"):
            cssMinified = io.StringIO()
            cssMinified.write(rcssmin.cssmin(filename, keep_bang_comments=True))
            themePak.writestr(os.path.join(dirname, filename), cssMinified.getvalue())

        if filename.endswith(".js"):
            jsMinified = io.StringIO()
            jsMinified.write(rjsmin.jsmin(filename, keep_bang_comments=True))
            themePak.writestr(os.path.join(dirname, filename), jsMinified.getvalue())

themePak.close()

I would suggest to use gulp gulpjs.com for something like this since it has everything you need built in. — Koborl
– Koborl, Commented Jun 4, 2016 at 22:33
rcssmin.cssmin() and rjsmin.jsmin() expect the first element to be the CSS respectively JS code to minify as string. You have to open and read the CSS and JS files by yourself. — Squall
– Squall, Commented Jun 4, 2016 at 22:44

Jacob Birkett · Accepted Answer · 2016-06-04 23:12:45Z

As stated by @Squall,

rcssmin.cssmin() and rjsmin.jsmin() expect the first element to be the CSS respectively JS code to minify as string. You have to open and read the CSS and JS files by yourself.

if filename.endswith(".css"):
    with open(os.path.join(dirname, filename), "r") as assetfile:
        assetdata = assetfile.read().replace("\n", "")
    cssMinified = io.StringIO()
    cssMinified.write(rcssmin.cssmin(assetdata, keep_bang_comments=True))
    themePak.writestr(os.path.join(dirname, filename), cssMinified.getvalue())

if filename.endswith(".js"):
    with open(os.path.join(dirname, filename), "r") as assetfile:
        assetdata = assetfile.read().replace("\n", "")
    jsMinified = io.StringIO()
    jsMinified.write(rjsmin.jsmin(assetdata, keep_bang_comments=True))
    themePak.writestr(os.path.join(dirname, filename), jsMinified.getvalue())

The changes in my if statements in the above code open the asset files as strings, then pass them along for minification.

I learned the hard way that you have to be sure to os.path.join() the filenames and the directories.

with open(os.path.join(dirname, filename), "r") as assetfile:
    assetdata = assetfile.read().replace("\n", "")

Then minify assetdata and write to file. (In this case, memory object.)

Samuel Dauzon · Accepted Answer · 2018-08-04 23:16:48Z

If you need minify (or/and merge) JS/CSS file : I created Minifpy : a tool to merge and minify JS and CSS file by using Python.

Minifpy uses a very easy JSON configuration file to define if files must be merge , minify or not :

{
    "js": {
        "minify_files": [
            {"from": "static/file.js", "to":"static/file.min.js"},
        ],
        "merge_files": [
            {"from" : ["static/file1.js", "static/file2.js"], "to":"static/public.js", "to_min": "static/public.min.js"}
        ]
    },
    "css" : {
        "minify_files": [
            {"from": "static/file.css", "to":"static/file.min.css"},
        ],
        "merge_files": [
            {"from" : ["static/file1.css", "static/file2.css"], "to":"static/public.css", "to_min": "static/public.min.css"}
        ]
    }
}

But Minifpy can't automatically minify each file on a project.

Minifpy detect any modifications on JS/CSS files and merge/minify them automatically (useful for development).

Collectives™ on Stack Overflow

Minify all CSS and Javascript in a directory

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related