Plugin: Save LESS

[ttx]

Hi,

i just created plugin for compiling LESS files on save.

Features:
- no file watchers required
- no overhead (plugin only runs on *.less files, so there is no slowdown while saving other files)
- options dialog - for setting path to your LESS compiler, minification and source maps

Requirements:
- LESS installed somewhere in your computer (only works with version >2.0)

Notes:
- plugin assumes, you are working with directories /less/ and /css/ (eg. /project/less/ contains your *.less files and /project/css/ will contain compiled css files)
- if the *.less file is included in other (main) *.less file, add comment like this in included file "//@main main.less" (without the quotes) - where main.less is the name of your main file.
- this is because when you save your included file, the main file should be compiled instead.
- this plugin will not work, if you use subdirectories for your *.less files (eg. /project/less/includes/*.less).

- after installation set your LESS path in plugin options (Plugins > Save LESS > Options). Add double quotes if it contains spaces or other special characters (my path looks like "d:\Software\nodejs\lessc.cmd" - including quotes).

- if you have better idea for compiling main files without the special comment in included files, please let me know here.

I can offer (limited) support for this plugin, here in this forum thread.

I will keep updating this plugin to work with new versions of LESS and try to add new features.

Enjoy.

Question for Blumentals developers: Script.TimeOut looks buggy - it calls the callback function immediately, even if the timeout is really big (like 1000000). Can you help? (see the commented line in plugin file). Thanks

EDIT: Updated to version 1.1
EDIT2: Updated to version 1.2

[Aivars]

Nice work, thank you! I'll check the timeout issue and get back to you.

[Aivars]

Ok, I figured it out. Instead of

Code: Select all

Script.TimeOut(4000, SaveLessClearStatusBar);

You need

Code: Select all

Script.TimeOut(4000, &SaveLessClearStatusBar);

Otherwise SaveLessClearStatusBar will be executed immediately and expected to return reference to the function to use for TimeOut parameter.

I think you've done a great job with the script, was it hard? I know the plugin API help is not perfect but are there any parts that stand out in their need to be improved?

Let me know when you feel like the plugin is ready for the production, I'll add it to the online repository of 2015.

[ttx]

Version 1.1 update. Changes:
- now you can choose output css type - normal, minified or both
- added more control over Clean CSS plugin (compatibility settings, advanced optimizations)
- removed Source maps option - it only worked with non-minified version + there was problems with paths
- added menu items under Plugins > Save LESS, to compile LESS file into desired type (eg: in options i selected only "minified" output type, but client sometimes wants to do some changes by himself. With this menu item, i can do one-time export to non-minified css. Or you can develop your site with normal css and when you are done use this to one-time export minified css for production use)
- fixed some problems with paths to "main" less file - now you can use comment like "//@main ../main.less" (without quotes) to link to a file one directory up from this file (can be more than one - just use "../" multiple times).

Please let me know, if there are some problems.

Plugin file can be downloaded in the first post

[ttx]

Ok, I figured it out. Instead of

Code: Select all

Script.TimeOut(4000, SaveLessClearStatusBar);

You need

Code: Select all

Script.TimeOut(4000, &SaveLessClearStatusBar);

Otherwise SaveLessClearStatusBar will be executed immediately and expected to return reference to the function to use for TimeOut parameter.

I think you've done a great job with the script, was it hard? I know the plugin API help is not perfect but are there any parts that stand out in their need to be improved?

Let me know when you feel like the plugin is ready for the production, I'll add it to the online repository of 2015.

Thank you. Now it works as intended

To your questions - it was fun, i really like your API. The documentation is enough i think - maybe the "Built-in classes" sections can be improved (eg: the "TComboBox" misses method for Adding items (it's under the "Items" property)).

Only thing i am missing right now is for the "ExecuteCommand" function to return exit code of the command (luckily the less app only outputs something on error).

I think the plugin is ready, but right now it forces users to use predefined directories for less and css files (i used WinLess app before and it used exactly the same structure - and i got used to it). If users will want it, i can make it configurable in options (like "output directory name" or "output to the same directory as less files") - but i dont want to overcomplicate it.

One more question: how can users update this plugin? Uninstal old and install new one? This will delete the settings in "properties.ini" file. Thank you.

[Aivars]

Yes, the only way to update without manually overwriting the files is to remove and install. We noticed this issue, too, but right now it's a bit too late to do anything about it before the release.

Regarding the plugin, I haven't really had any real-life experience with .less files, but after a quick search in github I see that lots of projects keep .less and .css files in the same folder so maybe you should at least consider that option. Even better if the plugin could detect whether directory name ends with \less or not and act accordingly.

[ttx]

Yes, the only way to update without manually overwriting the files is to remove and install. We noticed this issue, too, but right now it's a bit too late to do anything about it before the release.

Regarding the plugin, I haven't really had any real-life experience with .less files, but after a quick search in github I see that lots of projects keep .less and .css files in the same folder so maybe you should at least consider that option. Even better if the plugin could detect whether directory name ends with \less or not and act accordingly.

Just posted another update:
- added an option to "Place CSS files alongside LESS files". Your suggestion with directory name will cause problems if there are files in subdirectories (eg: /project/less/homepage/layout.less - this way, css file will be created in /project/less/homepage/layout.css)

Plugin file can be downloaded in the first post.

[tonoslav]

Hey, what about ftp support? Opened ftp file ..../less/file.less , on save create file ..../css/file.css , I work at a lot projects which I dont have defined as projects

[pmk65]

Hey, what about ftp support? Opened ftp file ..../less/file.less , on save create file ..../css/file.css , I work at a lot projects which I dont have defined as projects

Install a watcher script on the server. Then it can autocompile your less files when changed.
https://github.com/jonycheung/deadsimpl ... h-compiler