Jump to content

bisk8nes

Member
  • Posts

    10
  • Joined

  • Last visited

Reputation Activity

  1. Like
    bisk8nes reacted to alpenwasser in mincss Primer - Getting Rid of Unneeded CSS   
    A Small Introduction to mincss
    Note: I'm a not experienced with Python. I have some general knowledge about it
    and some scripting experience with other languages as well as some programming
    knowledge in C/C++, but Python is mostly uncharted territory for me. So if
    anyone spots some serious flaw or something that could be done alot better, feel
    free to point it out (politely ) and I will happily correct it.
    I'm mainly doing this because I have found the info on mincss which is out there
    not very beginner friendly. That also means that I may not always describe the
    most clever way of doing things for the sake of preserving understandability.
    Having said that:
    What Is It?
    A tool which strips your CSS files of unneeded stuff. You give it a URL, it will
    download that and parse it. Be careful though: If you have a CSS file used for
    several pages on your site, it will mark stuff that is not used on the URL
    you've given as unneeded. Completely logical of course, but important to keep
    in mind.
    What Do I Need
    Python2 (not Python3, as of 2013-OCT-08) mincss, obviously lxml (a Python extension) cssselect (also a Python extension) PhantomJS is optional I'm trusting you can manage to install this stuff yourself, if you're on a Linuxmachine it should be in the repositories (it is for Arch as of 2013-OCT-08).
    Let's Get Started
    Note: I'm doing this on a Linux machine, if you discover something I'm
    describing here not working on a Win PC, please let me know.
    Start a command terminal and change into the directory where you have stored
    mincss' files. Then start a Python2 console. On my Linux machine I simply type
    python2 into the console and hit return. If it's worked you should be greeted
    with a screen that has three > at its left:
     

    >>>Then, type in the following:
    >>> from mincss.processor import Processor>>> p = Processor()This will basically load mincss into the console (yes, I know: a simplification)and initialize an object named p of type Processor.
    After that, you give it an URL to download and instruct it to process whatever
    it has found there.
     

    >>> p.process_url('http://www.yourdomain.com/')>>> p.process()This will detect any inline CSS if I understand things correctly, I have not yettried this out myself.
     

    >>> p.inlines[]And this searches the document for linked CSS stylesheets and puts the resultsinto an array, starting at index 0 (so, the first stylesheet will be located at
    links[0], the second one at links[1] etc.). Don't mind the funky output.
     

    >>> p.links[<mincss.processor.LinkResult object at 0x10a3bbe50>, <mincss.processor.LinkResult object at 0x10a4d4e90>]Now you grab the first stylesheet and initialize it into object one(again, the name is arbitrary). If more than one stylesheet has been found,
    iterate through the array links[k] until you've initialized each stylesheet into
    an object (alternatively, you can of course grab one stylesheet, proceed
    further, then come back and initialize the second stylesheet into the same
    object etc.).
     

    >>> one = p.links[0]You can check which CSS sheet has been grabbed by entering this command, it willgive back the name and location of said stylesheet.
     

    >>> one.href'//d1ac1bzf3lrf3c.cloudfront.net/static/CACHE/css/c98c3dfc8525.css'Now for the interesting bit: This will give out the length of the stylesheetbefore it has been processed...
     

    >>> len(one.before)83108...and after processing: 

    >>> len(one.after)10062By entering the following commands, you can print out the entire stylesheetsonto the screen if you wish:
     

    >>> one.after>>> one.beforeNow, this is nice and all, but what we would really like is generate a new, slimmed downstylesheet, wouldn't we?
    Thought so. Alright then, first we open a new filehandle for writing:
    (It is entirely possible mincss has some sort of integrated function/method for creating
    new, stripped down, files, but I have not been able to find anything on that so until
    informed otherwise I will presume it does not.)
     

    >>>filehandle=open('yournewfilename.css','w')>>>filehandle.write(one.after)>>>filehandle.close()And voilà, you should now have a new file of the name yournewfilename.css in your current directory.What Next?
    As said I'm no Python guru, and I only encountered mincss for the first time a day or so ago, so there's
    certainly some stuff missing from here, but it gets the job done which I think is probably at the top of
    many people's list. I've also read that it can do Javascript, but have not played around with that yet.
    If you wanted to automate this process, you could also write a script taking advantage of mincss, for an
    example see mincss' own examples here.
    Sources
    Official Site
    mincss Github
    Stackoverflow
    If you have any corrections, amendments, suggestions etc. feel free to post.
    Happy coding,
    -aw
×