Sublime SFTP - Upload compiled css when sass file saved

Question

I'm developing html/css in Sublime. I'm writing my css with sass and using Sublime's build system to generate the css file on file save. It's also configured to upload on save using the SFTP plugin.

My problem is that the generated css file doesn't get uploaded as that isn't the file I've directly saved. I've tried to see if there is a way for the SFTP plugin to upload all files that have been modified locally, but it doesn't seem to support that.

Is there anything I can do to achieve this?

Answer 1

I'll throw my solution into the mix, just in case anyone stumbles on this as I did and wants to stick as close to a solely ST-based workflow as possible. If you're using the SFTP package for ST, there is an option to monitor files for external saves.

Unfortunately, using the ST build system to compile my SASS somehow slipped by SFTP. SASS CLI's watch utility, however, triggers the upload just fine. Once set, presuming the target file remains open, SFTP will upload it after each build.

To recap,

1. Open target file, followed by the command palette. Enter SFTP: Monitor File (Upload on External Save)

2. Start whatever CLI watch/build utility you prefer, for me, Sass: sass --watch app.scss:app.css

3. Leave target file open, otherwise the SFTP monitor seems to cease.

Enjoy!

NOTE: You can also enable file monitoring from the sidebar by right clicking on the file you wish to monitor and selecting...

Answer 2

SFTP has an option for that. Search on Package control for SFTP > Monitor file. Once selected, "SFTP monitoring" will appear on bottom command info. Now on every save, both sass and complied css will be uploaded to their respetive folders.

Answer 3

Because Sublime SFTP doesn't seem to support this, you'll probably have to go a different route.

I would recommend using something that monitors your css folder, and automatically uploads any changes to your server. Using good ol' fashion WinSCP (if you're on Windows) would work, but any way to sync folders works.

http://winscp.net/eng/docs/task_keep_up_to_date

Answer 4

I ended up scrapping SFTP and using ExpanDrive. Fits my workflow perfectly.

Answer 5

I'm still using Sublime SFTP to upload script files (js/css/php etc). Usually I press shortcuts to upload opened files (Ctrl Alt U + N). But it was annoying especially with frequent trial disclaimer window.

I wrote a simple tool on nodejs which monitors project folder and uploads any file on its change. It's not perfect but made my workflow much comfortable: https://github.com/liberborn/live-uploader.

Answer 6

Also note that you can map a local copy of your files to the remote copy, by opening the local folder in Sublime, then right-click on it in the sidebar, and select SFTP/FTP -> Map to Remote... to set up the connection, making sure to enter the appropriate remote_path to map the folder to.

Then you can do your build/compile, open the local compiled file(s), right-click on the code, and in the SFTP/FTP menu, select the Monitor File option.

Now when you build again in future, with the compiled file(s) still open, they will get uploaded to the server shortly afterwards (as well as being refreshed in Sublime when you switch tab to view them).

Answer 7

There's a way to force Sublime SFTP plugin to upload compiled files, if your CoffeeScript/Sass/Less files are compiled when you save a file.

Go to Sublime Menu → Tools → Developer → New Plugin..., and copy-paste the code below:

import sublime, sublime_plugin, re, os

class SftpAutoUpload(sublime_plugin.EventListener):    

    def is_remote_file(self, file_name):
        while file_name != os.path.abspath(os.sep):
            file_name = os.path.dirname(file_name)
            sftp_config = file_name + '/sftp-config.json'
            if os.path.exists(sftp_config):
                return True 
        return False

    def on_post_save_async(self, view):
        window = view.window()
        file_name = view.file_name()

        # Upload compiled files to SFTP when saving a file (Coffee, Sass, Less)
        if self.is_remote_file(file_name):
            extensions = { 'coffee': 'js', 'less': 'css', 'sass': 'css' }
            for extension, compiled in extensions.items():

                matches = re.match('^(.*)\.'+extension+'$', file_name)
                if matches is not None:
                    compiled_file = matches.group(1) + '.' + compiled
                    if os.path.exists(compiled_file):

                        new_view = window.open_file(compiled_file)
                        window.run_command("sftp_upload_file")
                        new_view.close()

Save the file as sftp-auto-upload.py. Restart Sublime.

What the plugin does is the following:

• it checks if you're editing a CoffeeScript, Sass or Less file;
• if a compiled file exists, then the compiled file is opened in Sublime
• SFTP: Upload File command is executed, and the compiled file is closed.

All this happens almost instantly, so you don't even notice that a new tab was opened.

The code can be improved, but it does the trick.