For all of the gedit nuts out there (like myself) who develop css and javascript, I have created a gedit plugin just for you. The Gedit Clientside Plugin. This plugin can minify and beautify javascript and css. Also for javascript you jsLint is included. Finally for good measure, I threw in a gzip method as well.
Before I go any further, let me get you to the github page where you’ll find plenty of documentation and more importantly the download:
This plugin mostly uses other open source tools, such as:
- JS-Beautifier to format and “Unminify”
- JSMin to minify
- JSLint to look for syntax issues
- CSSTidy to beautify and minify css
- CSSLint to look for syntax issues
And to run these excellent tools there are two prerequisites (you probably already have one):
As I mentioned there is documentation on the Github page, so for usage and further configuration check there. Hope you enjoy!
35 Responses
Jeffrey Gilbert
Nov 30, 2010assumption is this is firefox?
trent
Nov 30, 2010This is a plugin for gedit text editor, originally for linux, but now works on windows and mac. Its similar to textmate,.. but free!
http://projects.gnome.org/gedit/
Asif Youssuff
Dec 31, 2010Any chance you could add SASS formatting as well?
trent
Dec 31, 2010it looks like it could be handy if properly integrated. How do you envision this addition working?
jaime
Jan 24, 2011Hi from Mexico. I am using gedit for web development since 4 months ago, I can say that your plugin is one of the most usefuls. I am very happy using your plugin and gedit.
Sorry about my english :S.
YellowLed
Feb 19, 2011Great job. However, I think this has the same issue minifying CSS code as yui-compressor (see http://yuilibrary.com/forum/viewtopic.php?f=94&t=6089):
If the stylesheet contains generated content (i.e. “content: “.”;) and if said content is a unicode character, everything after that line is rendered useless.
I am not a code, so I can’t provide a fix, but apparently, there is one — CSS minified by the online YUI compressor interface at http://refresh-sf.com/yui/ still work. However, it would be some much more awesome to have this work in gedit … :-)
trent
Mar 04, 2011Hey YellowLed,
Do you have an example file? This plugin makes use of the php version of CSSTidy instead of yui-compressor, you’re indicating it has this a similar problem with CSSTidy as well?
YellowLed
Mar 04, 2011Trent, sorry for not noticing earlier — I may have been wrong. There *is* some issue with the YUI compressor (which is already fixed in versions newer than the one in Maverick Meerkat), but it is a different one than the one I linked to. (Meaning there is no issue with :before/:after content.)
Roger Johansson can explain this better than me:
http://www.456bereastreet.com/archive/201012/yui_compressor_and_css_media_queries/
I guess *this* is the one issue I kept having with files minified with Clientside. (I use media queries quite frequently.)
trent
Mar 04, 2011Yes, it does appear CSSTidy has an issue with this type media query too, but a slightly different bug.
This input:
@media only screen and (max-device-width:480px) {
body {background:#fcc;}
}
Turns into this:
@media only screen and max-device-width480px{body{background:#fcc}}
It appears it completely doesn’t know how to handle this scenario. Thanks for pointing this out. I have no problem changing to another minifier/formatter, but the issue exists in the format and minify functionality.
Are you aware of any other (preferably python, php, or nodejs based) css minifier and formatter?
YellowLed
Mar 04, 2011Unfortunately, no. I know it’s fixed in the latest yui-compressor version (which are not available in Ubuntu 10.10 yet; I filed a bug report anyway), but since I’m a frontend-only guy, this whole topic is kind of new to me. :)
trent
Mar 10, 2011It appears CSSTidy hasn’t been updated in quite some time, so I noticed it didn’t support many newer properties. However I found another library which reports being a python re-creation of YUI CSS Compressor, I swapped them out. Your test case appears to work ok, although I don’t have anything to test out that specific case. Can you let me know if it works?
Bart
Mar 18, 2011Great plugin!
For those staying on LTS Lucid, here you find a PPA for NodeJS: https://launchpad.net/~bigeasy/+archive/node-stack
Dan Gibbs
Jun 10, 2011This is absolutely awesome and makes my life so much easier. Good job
Visitor
Sep 18, 2011Hi Trent, thanks for the plugin. I’ve just installed it together with nodejs and some of the tools work and others don’t.
Specifically, JS Lint doesn’t work, but JS Minify does. While, Format CSS and Minify CSS do work, but CSS Lint doesn’t.
Any suggestions?
Thanks
trent
Sep 18, 2011Do you know which version of edit you’re using? It probably doesn’t work with the latest edit 3 as it is geared for gnome 3. But if you’re on 2.x it should work.
Second there is an option in the plugin settings for how to call nodejs. Its value should be just like If you open a terminal and run nodejs. It could be “node”, “nodejs”, or “path/to/nodejs”. I provided this option because by default it was different for Linux, Mac, and windows.
Lastly you can try starting gedit from the terminal: “./path/to/gedit/binary /path/to/js/file” and try running one of the lint or formatting tools. Any errors will be output to the terminal.
I do plan to update the plugin to edit 3, just waiting on gnome 3 and gedit 3 to become more standard
Visitor
Sep 19, 2011Hi Trent, thanks for the reply. I’ve got gedit v2.30.4 installed on Ubuntu 11.04, Gnome 2.32.1.
I’ve just realised that I cannot specify a path to nodejs; the configuration window doesn’t do anything when I click on OK or Cancel. I can use the radio buttons and the input field but I cannot click OK. Does that mean that I cannot save the settings chosen in the configuration window?
jslint works from the terminal, I think, although I’m still new to Linux.
Thanks for your help.
Koji Yamashita
Sep 21, 2011Hi Trent from Japan. Thank you for your great plugin.
It made my JavaScript coding much easier.
BTW Croclford has published his new version of JSLint, and as far as I tried it out on his website, it seems to work much better than the previous version.
http://www.jslint.com/lint.html
I am sorry to push you, but can you update your plugin to make it work with the latest version please.
trent
Sep 21, 2011Updated three of the libraries, csslint, jslint, and jsbeautify!
trent
Sep 21, 2011Visitor, can you try tabbing to the OK button?
If that doesn’t work you can try this in the clientside plugin folder:
- Open __init__.py in a text editor (gedit is fine) and look around line 71. There is a setting for “nodejs”. Set this to whatever you need it to be.
- Close gedit.
- Then there should be a file in the clientside plugin folder called defaults.pkl, Delete it.
- Open Gedit and test it out.
Deleting the defaults.pkl file will force it to pull the value you just set in the code.
Woidda
Oct 21, 2011If I get that right – Client-Side works with gedit 2.* ?
Is there any chance the Client-Side will be compatible with gedit 3.*?
Sorry if don’t get the version numbers right. I don’t know what the used convention for numbering gedits version is. Actually I only care about your plugin working together with gedit version 3.2.0 that is currently shipped with Ubuntu 11.10.
I do really like Client-Side a lot – you’ve done a great job here – but I do not want to downgrade gedit for whatever reasons…
trent
Oct 24, 2011Woidda,
You are correct, it currently only works with gedit 2.*. I do have plans of updating it for 3.* but have not committed to Ubuntu 11.10 with Gnome 3 or Unity yet. I have plans on upgrading in the coming weeks. I regularly use the plugin so I will be updating it then. I’m not sure what all is involved for the upgrade, I know Gedit changed its plugin system so it will be a learning curve yet again..
Dave Clements
Nov 30, 2011Hey trent, thanks for making such a useful tool, a request por favor, if we could insert JSLINT options through Configure Plugin this would be brilliant, even better would be able to create JSLINT profiles that could be assigned short cuts to switch between. For node dev, I want to set node: true and es5: true whereas for browser, obviously I want browser:true etc.
many thanks,
trent
Dec 01, 2011Dave, this would be helpful. I will add it to the todo list. First up on the list is finishing the upgrade to gedit 3.*, which is halfway there. JSLint and CSSLint config options would be helpful.
trent
Dec 14, 2011Clientside plugin is now available for Gedit 3. Head over to Github and grab it. There is also a separate branch for Gedit 2, so both coexist.
thomas
Jan 09, 2012Hi,
where can I download the files for Gedit 2. On Git I only seem to get the files for Gedit 3.
Thanks Thomas
trent
Jan 09, 2012Hey Thomas, here is a link to the Gedit 2 branch on Github:
https://github.com/trentrichardson/Gedit-Clientside-Plugin/tree/Gedit2
thomas
Jan 09, 2012Thanks – I installed everything
sudo apt-get install nodejs php5-cliand put the files intoHome/user/.gnome2/gedit/plugins/as described but don’t find the plugin in the settings. Am I missing something?trent
Jan 09, 2012Do you have the .plugin file and the directory with the plugin sitting there side by side? Also you must restart gedit for it to look for new plugins.
thomas
Jan 10, 2012the files are there and I’ve restarted sevral times in between. A few other plugins for Gedit do work though.
trent
Jan 10, 2012If you start gedit from the terminal does it throw any warnings about the plugin?
gedit myfile.jsthomas
Jan 10, 2012no, it opens a tab named myfile.js :-(
here is a screenshot where I have the files copied clientside files
trent
Jan 11, 2012Looks like those are the Gedit 3 files, you were looking for the Gedit 2. Those are available at the link I left above. Gedit 3 uses a .plugin, Gedit 2 uses .gedit-plugin
thomas
Jan 12, 2012sorry for being such a pain …, it seems I’m getting closer. I have Clientside now in the list of plugins but it’s greyed out.
thomas
Jan 17, 2012got it working finally. opening it in terminal printed the errors – strangely enough all the python files had the wrong content.
Mike MCKee
Feb 12, 2012Ah, a fellow Gedit fan. Yeah, I use Ubuntu Linux and it’s my favorite text editor. I also add several of the plugins to make it even better.