Sass development workflow issues - sass

I've been trying to adopt Sass into my development workflow. I do primarily front-end development and as such, I am updating stylesheets quite frequently. After endless searching, I have yet to find the answer to what I feel should be a simple question.
I use both Coda and Textmate, so a solution for either would suffice. When developing locally, I open the terminal, get my .scss file watched, then go to town. I save my .scss file, it happily updates my .css file... and then I'm left with the slight annoyance of having to manually select the .css and publish it to the remote server. Its not the end of the world but having to pause my usual dev workflow to manually upload a file I'm not actively in is becoming a nuisance. In Coda, it doesn't detect when a file has been updated outside of Coda, so it isn't marked for publishing. Its driving me crazy. I just need a way to save the .scss file and have the .css file easily/automatically uploaded to the remote server. Any help would be greatly appreciated!

The typical way Sass is used is to design on your local computer while using Sass, and to only upload the CSS (and probably the Sass as well) to the server once you're finished. Another alternative would be to run sass --watch on the server so that it compiles the uploaded Sass files.

I have had a rake task that calls rsync for this kind of cases. That still needs to be run each time but because it uses rsync only the changed files are moved. Now, while reading this I got an idea that shouldn't there be 'rsync watch' somewhere and indeed there seems to be: http://code.google.com/p/lsyncd/

Here's an interesting approach I just read about, installing compass into a small local ruby env, inspired by python virtualenv:
http://rhodesmill.org/brandon/2011/adding-compass/
YMMV (I haven't even tried this myself).

The Sublime SFTP/FTP Plugin can monitor and auto-upload the .css output file whenever it's updated by the SCSS compiler.
Map your project directory to your server
Check it's woking correctly by browsing remote
Right click on your .css output file, and choose 'Monitor File (Upload on External Save)'
Keep the file's tab open in Sublime to ensure it stays monitored/uploaded.
For extra points, have a look at Browsersync or LiveReload.

Related

Jekyll not refreshing changes to custom CSS Subdirectory

For work I have to manage styles and keep them consistent between two different sites. To accomplish this, I created a repository where I can use gulp/scss to export the CSS I need. Changing this is not an available option for me.
One of the sites is built using Jekyll. I have cloned the CSS directory and pointed the CSS to pull from that directory, no problem. When I make changes to the scss, the gulp task exports the CSS, but the changes are reflected when I am running the site. It detects the changes and says it regenerates the file, but the CSS simply doesn't get updated. If I stop the Jekyll process and re-run bundle exec jekyll serve - the css changes immediately show up.
Basically, I just want to know if there is a way to make sure these files get updated. Any help would be greatly appreciated.

Can't save when running "jekyll serve" on Windows 8.1, Notepad++

I am trying to use jekyll locally to build my website. It is all set up, and I can build and serve and see results at localhost:4000. There are no errors.
The problem is that when I run "Jekyll serve" I can't save files. The save option is greyed out and "ctrl + s" wont work.
I can open and edit the files, can do "Save As" and do other things - basically anything except saving.
I can save files when I am not serving them.
From what I understand, Jekyll is intended to be used to allow saving while serving so we can see our changes as we go. The auto-regenerate function (now a default with serve) supports that use.
I suspect the problem relates to some sort of permissions-type rule stopping me from editing files that are in use.
But because I am self-taught newbie and am not a developer/programmer, I don't know if it is something to do with how I have set up jekyll, notepad++, permissions or something else entirely.
Here is my environment:
Windows 8.1 64-bit
Ruby v2.1.5p
Jekyll v2.5.1
wdm v0.1.0
RubyDevKit
Notepad++ (in admin mode)
Here is what I have tried:
Scaled back the listen gem from v2.10.0 to v2.7.11 (the earlier was listed as safe/tested on a jekyll on windows website)
Scaled back Jekyll from v2.5.3 to v2.5.1 (the earlier was listed as safe/tested on a jekyll on windows website)
Opened Notepad++ in admin mode instead of normal mode.
Tried executing jekyll serve --watch (in case watch enabled saving)
I have not tried re-installing ruby v2.1.3 (listed as safe/tested on a Jekyll on windows website) because Jekyll is otherwise working I don't want to try a re-install except as a last resort - as a newbie I found it a pain to install it on Windows in the first place.
Can anyone help me with this (probably simple) issue?
I thank you for any assistance in advance.
Okay. So I feel really stupid.
But instead of pretending this never happened, I had better post this answer in case anyone else has a blonde 'moment' (read: an entire day) like I did:
Firstly, you can't edit the _config.yml files while serving. You can edit the other files - html, markdown, etc - but not the config file.
Secondly, in Notepad++ you need to make an actual change to a document before the saving option will appear.
I was using the _config file as my 'test' document for regeneration. While I did open up other files to check when I first thought I had an issue, I THINK I may not have made any changes to them - so the option to save them was never activated. After that, I only looked at the config file after making changes.
So, I THINK I may have been able to save while serving all along.
However, if I am wrong and it wasn't my own stupidity (which I strongly doubt), the steps I took which fixed it were:
Those steps outlined in my question; and
A reinstall of Notepad++ (as kindly recommended by 'nerver nerver' who has since removed his/her comment after I said that did not work).
SORRY ... and excuse me while I go and crawl away and hide in shame ...
If the files you were editing at that time was only _config.yml then the expected behavior is that the saved changes are not reflected when the Jekyll server is running/watching.
This is because the server is started after reading the configuration settings in _config.yml, and then changes that happen to that special file after that are not monitored by Jekyll (this is current as of May 2015, in case this gets changed in the future). Currently this is by design. see this SO question as well
What that means is, you have been saving the file when Jekyll is running just fine, the changes just do not get updated. A way to check this is to make some changes, close the file, then open it again (if you want to be extra sure, open in another editor) and see if reflected changes show up.
Changes made to other files in Jekyll when the server is running will be reflected. For example, if I edit a typo in a blog post, edit CSS files or change some formatting, and save in any text editor, Jekyll will regenerate the file from scratch and you should be able to see the changes by refreshing the localhost:4000 page (or whereever your server is running at).
I'm not sure about running Jekyll on Windows, but on a Linux terminal, Jekyll actually notified the number of files that have changed (with a timestamp) and that it regenerated X number of files. Something like
<timestamp> 3 files have changed. Regenerated 3 files in 0.0536 sec..
Lastly, this is probably not your issue, but I thought I might add this here for future reference, do not edit the files inside the _site folder, as they are always deleted and regenerated whenever the server is started again. Editing those files by hand might save and display changes, but the changes will be lost (because they are, statically generated every time by Jekyll)
TL;DR You most probably have been saving your files! The changes in _config.yml are just not reflected once the server is running, and has to be restarted for the new configuration parameters to take effect.

Easy FTP publishing for Vim (like Coda)

I've been using Vim (MacVim) exclusively for months now, and I love it. Before using Vim though, I used Coda (I'm on OSX), and the one thing I miss about Coda is the way it marks my files for publishing via FTP whenever I edit them. I can then choose to upload the modified files single files individually, or to publish all of them in one go.
Is there anything that will do this or similar in Vim?
I'm aware netrw can edit directly over FTP, but I have all my sites running locally as mirrors of the online sites, so I need to edit locally and publish files remotely as and when I need. I've Googled for solutions but can't find anything.
I'm far more productive in Vim while in the editor, but having to open up an FTP program and hunt and peck to copy across files as I edit them seperately is a real pain, and makes me less productive overall when working on websites when compared to working in Coda.
Any suggestions welcome :)
Transmit, Cyberduck and YummyFTP (the ones I know) all have their own version of "automated folder syncing" where you work locally and any modified files are uploaded on change: you setup an "observer" and never have to hit a special button or shortcut again.
If you want to only use MacVim you could write a little command that uploads the current file on save: a script that would use the current file's path to construct an scp command. But this doesn't seem very portable/practical to me. It appears some people have already written something like that: here and there.
The right way is (not only in my opinion) to:
have everything under some kind of VCS like Git, Subversion or Mercurial or whatever floats your boat
write your code in a local clone/checkout and test the hell out of it on a local server
commit only working code
push milestones to a staging server used by you and your clients to test everything, this part can be automated via a post-commit hook or something like that
deploy only validated changes on your production server.
All the aforementioned Version Control Systems can be used directly from Vim's command line with :!git commit or :!svn update… If you need more abstraction, Fugitive (Git-only) or VCSCommand (multi-VCS, my choice) are here to help.
On your loss of productivity due to uploading files: I think it's very normal because you essentially perform very different tasks with very different neurological needs. This speed bump can also be experienced when previewing a layout change in your browser, looking up a color in Photoshop or any other similar task. I don't know of a way to pilot Photoshop, Chrome's dev tools or Outlook from within Vim and I don't think such a gizmo could reallistically exist so you will probably have to bear with it.
You can try git-ftp - a git based command line ftp client. Then you can manage your project as a Git repository, and git-ftp will only upload the files marked with Git - and only if they have changed.
The downside is that you are going to have to learn Git - and that's a bit overkill for what you need.
The upside is that you are going to learn and use Git.
I have since stumbled upon a Vim plugin which works with Transmit (which I happen to use as my main FTP client) and allows me to upload the current file to the server with a simple keymap (Ctrl+U) as I edit.
This strikes a nice balance between being a very simple solution, and one that does enough of what I need to improve my productivity significantly.
Any more suggestions are still welcome!

Project update via TextMate (like Espresso)

I am thoroughly in love with TextMate. I program everything in it, including ASP.NET for my daily job. However, I have a license for Espresso, and I was looking at it recently and discovered that there is a "Publish" section that I knew about before, but I didn't know that it could compare my FTP directory with my local directory and publish only the changed files.
Over the past week I've been finding myself using Espresso just for that functionality. However, I was hoping there was a way to get this functionality inside TextMate. I know that you could use an AppleScript script with Cyberduck (my FTP client) to upload a file when it changes, but I have never got that working and it also doesn't include the ability to merge files like Espresso does.
Am I plumb out of luck? Am I stuck using two different programs for the forseeable future?
I haven't tried it, but you should be able to set up a simple rsync command in a bundle in TextMate that will use environment variables from your project to synchronise.
See Using rsync to enable the project drawer in TextMate while working on a remote server for an example.

Web Development Tools Question - Automatic File Upload

This should a quick question for some easy rep.
I'm doing some PHP Website development, decided to check out and play around with jQuery as well. I don't want to install and manage a local PHP server/service, but I would like a quick one click method for automatically uploading the PHP file I'm working on to my hosting service so I can test it live.
I'm looking into some different editors like Komodo Edit, Notepad++ but I'm wondering what tool has the ability to one click FTP for me?
Edit after a few posts came in:
Well Shoot, Ultra Edit costs around $100, and Aptana allows you to upload to their "Cloud", but you have to purchase the cloud space. I already have my own server. I'll have look into BlueFish a bit more....Thanks for the help guys.
I'm thinking I might try using Notepad++ and just write a batch file to run windows built in FTP, make a connection and copy all the files in a folder in auto-overwrite mode. Seem feasible?
I have a setup that I use FileZilla as the FTP, and NotePad++ as my text editor.
Within FileZilla, I set NotePad++ as the default text editor, and when I hit Ctrl-S within the file I am working on at that time, it automatically uploads those changes to the server.
You will be able to edit the preferences within FileZilla (http://filezilla-project.org) to set your default text editor, this is something you should be able to do with any FTP program.
Check out this post for more information: http://linhost.info/2008/01/notepad-and-filezilla-tip/
UEStudio has integrated (S)FTP, SVN, etc, plus the ability to open a file over FTP - of course, it actually just downloads to a temp file, but each time you press save, it uploads it to the server again.
I'm pretty much obliged to point out just now that you might want to reconsider your decision to avoid a local development environment. Using XAMPP, it's ridiculously easy to set up a local web server. There are a multitude of benefits to this, far too many to list, even.
The Aptana IDE can do one-click upload via FTP and also synchronize all files between your local environment and remote server (based on timestamps) with one click as well.
Bluefish can edit the file directly on the FTP server. I'm not sure if the Win32 version can do that though.
i use e-texteditor. It's some kind of textmate clone, only is better :P
I have used sublime text with sftp pluggin.
sublime3 and
sftp pluggin
You only need to config sftp file on root folder.
Works quite good.
Regards
Most advanced editors/IDE's like Zend Studio allow adding FTP servers and editing files directly. Once modified, pressing Ctrl+S would update the file on server.

Resources