13

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?

Ryan
  • 3,726
  • 3
  • 26
  • 38
  • This is quite an old question - but something I was struggling with for some time as well - I found it really annoying to have to manually open each file I wanted to monitor for upload, so I wrote this tool to do what I needed. https://www.npmjs.com/package/upload-changes – waffl Dec 05 '16 at 21:50
  • I ended up finding the Install Packaged named 'SublimeOnSaveBuild' ... works like a dream! Available using Package Control from within Sublime to install. https://github.com/alexnj/SublimeOnSaveBuild – Barry Costa May 26 '18 at 20:07
  • Not really the same thing, Barry - That merely builds the CSS when you save, it doesn't do any uploading to a server. – EmSixTeen Sep 30 '18 at 08:45

7 Answers7

39

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.

enter image description here

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...

Sidebar Dialog Option for enabling File Monitoring

EranSch
  • 640
  • 4
  • 9
  • 1
    I changed my accepted answer to yours as you found a real solution, thanks. :) – Ryan Feb 04 '14 at 21:58
  • I'm using Compass for the SASS building w/ Sublime Text, and #3 was the key. Thanks for this. Note that the order matters; opening the file that you already monitored does not cause it to start uploading. But opening it and then monitoring it again (#1) does. – jwinn Apr 15 '14 at 22:35
  • 1
    @jwinn, you're correct. This also holds true when quick switching between projects. If you switch to a different project, the monitor directive will be lost and must be reassigned. For someone who gets interrupted a lot, this has caused great confusion when returning to a project. – EranSch Apr 16 '14 at 15:54
  • Need some help. I can't even find the monitor file when searching. Yes, I have installed the SFTP package for Sublime. – Chris Mar 12 '15 at 19:36
  • @Chris I updated the answer to include an alternate method of enabling file monitoring from the sitebar. You should be able to right click on a file and select `Monitor File` from beneath `SFTP/FTP`. – EranSch Mar 13 '15 at 20:20
  • @EranSch OK, this is just weird now. All I get when I right-click on a file, is simply "close"! SFTP is definitely installed as it's listed when I go Preferences> Package Settings. It's there! I'm obviously doing something wrong, just can't figure it out. Thanks anyway. – Chris Mar 13 '15 at 21:13
  • 1
    This has been so helpful for me, I use it a dozen times a day. Would there be a way to add the file monitoring as a project setting? So the specified files (eg; /app.min.css, /app.min.js) are automatically watched when you open that project? Thanks! – CJWEB Mar 31 '16 at 10:13
  • All the wasted years not knowing about this! – Dillon Apr 01 '16 at 19:26
  • Thanks a ton for the help. Exactly what I was looking for months – iSaumya Oct 08 '17 at 07:13
  • Great! Just tested and now works fine even with ST3 build system. – venz Feb 13 '20 at 07:57
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.

unpezvivo
  • 305
  • 2
  • 2
1

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

MattDiamant
  • 8,561
  • 4
  • 37
  • 46
1

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

Ryan
  • 3,726
  • 3
  • 26
  • 38
1

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.

liberborn
  • 177
  • 1
  • 7
0

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).

Dave Nattriss
  • 41
  • 5
0

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.

Alexandre S
  • 266
  • 3
  • 4