Sviluppa localmente SASS, carica in modifica

Question

Sono uno sviluppatore front-end che passa da CSS a SASS. Ho installato Ruby e Compass sul mio computer locale e Compass "watch" funziona perfettamente.

Tuttavia, continuo a trovarmi con file CSS locali che devo trasferire FTP manualmente sul server dopo ogni piccola modifica, per vedere cosa ha apportato la modifica. Mi piacerebbe automatizzare questo.

Ho trovato this thread che suggeriva di usare rsync, ma io uso Windows e sento che impostare rsync sarebbe davvero difficile.

C'è un modo per automatizzare questo utilizzando Ruby? Il flusso di lavoro che sto cercando di ottenere:

1. Ho salvato il file SCSS in VIM.
2. vigilanza della bussola rileva la modifica e compila un nuovo file CSS
3. Alcuni strumento magico rileva la modifica al file CSS, arrivi al mio server
4. ho passare a Chrome, ha colpito F5, e vedere il cambiamento

Posso fare tutto, tranne per il passaggio 3. Qualche idea? (Che non coinvolgono solo software Linux o Mac?)

Answer 1

Dal momento che la domanda è stata posta nel 2011 Compass si è evoluto e ora fornisce callback functions di fare esattamente ciò che è stato chiesto alla domanda:

Per Fase 3 è possibile utilizzare le funzioni di callback on_stylesheet_saved e on_sourcemap_saved per caricare i file * .css e * .css.map sul server di produzione.

codice di esempio come fare questo può essere trovato in questo StackOverflow answer

Answer 2

La soluzione più semplice sarebbe quella di sviluppare localmente (come è una best practice). Esegui un server web sul tuo computer (prova XAMP per Windows) e tutte le modifiche saranno immediatamente visibili, senza dover caricare. Carica solo quando hai finito.

Answer 3

Sono in una posizione simile in via di sviluppo in sass (scss) e l'anteprima su un sito dev remoto. Durante lo sviluppo su Windows, utilizzo Sublime Text 2 per modificare con il plug-in FTP-Sync per l'upload automatico al salvataggio.

Questo plug-in ha un'opzione utile per contrassegnare le cartelle controllate per i salvataggi di file che attivano il controllo di un percorso diverso per ulteriori modifiche ai file da caricare. È quindi possibile contrassegnare la cartella scss, apportare modifiche a un file scss e salvare, che avvisa ST2 di guardare la cartella css (è possibile creare un ritardo per consentire un tempo sufficiente per la compilazione) e caricare qualsiasi file modificato.

Dopo l'installazione del software e l'impostazione di FTP Sync per il progetto specificato, le azioni ammontano a 1) modifica e salvataggio, 2) attendere un paio di secondi, 3) aggiornare il browser per visualizzare le modifiche. (Se il sito sembra danneggiato a un certo punto, potrebbe essere necessario aumentare l'impostazione del ritardo di un secondo e salvare nuovamente il file per attivare il processo un'altra volta.)

Non sono sicuro di come farlo su altre piattaforme per un sito remoto, anche se mi chiedo se Coda 2 abbia alcune opzioni che potrebbero funzionare per gli utenti Mac OS.

Answer 4

Non sono d'accordo con Roy e Adam, quando lavoro con temi Wordpress, sviluppo su un server di sviluppo remoto. Ho una squadra di persone che aggiunge contenuti e altre modifiche che aggiornano il database, sarebbe difficile per me, visto che lo sviluppatore lavora localmente il 100% delle volte. Il loro file sql che si aggiorna con il contenuto non si integrerebbe molto bene dopo il fatto con il mio file sql (conosci le impostazioni delle opzioni del tema e cosa no).

Ho evitato di utilizzare SASS per questo motivo fino ad ora.

Il mio flusso di lavoro ottimale sarebbe quello di modificare il mio file scss -> auto compilare in css -> caricare automaticamente nella ricerca (come un upload su save vorrebbe) -> livereload ha luogo e vedo le modifiche (posso vivere senza questo ultimo passo).

Non ho ancora tentato questo, ma ho trovato questo collegamento che sembra essere la risposta più vicina finora. Using SASS with Remote Setup

Nota a margine: lavorare localmente non è sempre un set up ottimale. Non è una risposta e questa è l'ottava volta che ho visto questa domanda con risposte simili.

AGGIORNAMENTO: Appena provato senza Codekit basta suonare --watch e ha funzionato benissimo!

UN ALTRO AGGIORNAMENTO: Ho ulteriormente modificato il modo in cui gestisco sass e lo sviluppo remoto. So usare Sublime, apri il mio file .scss e .css allo stesso tempo. Quindi uso SFTP (un pacchetto per sublime) in "Monitor File" che cercherà le modifiche al file al di fuori di modificarlo direttamente, quindi apro il terminale e eseguo il file scss, ora ogni volta che lo salvo è conforme localmente e quindi il file CSS compilato si carica automaticamente sul mio server! Spero che abbia senso, forse farò vedere un video.

Answer 5

Nella mia esperienza il modo migliore è quello di lavorare in questo modo:

1. hai un sito da qualche parte - e in realtà non importa dove e come complesso di questo sito è;
2. si dispone di file SASS locali e CSS generati da questi file SASS;
3. installare Fiddler2 (proxy Web)
4. configurarlo per catturare una richiesta di file CSS e sostituire la risposta con il file CSS locale.

Quindi, come è possibile vedere, è possibile utilizzare il file CSS locale anziché quello remoto. Quindi non è necessario caricare CSS ogni volta che si costruisce il SASS.

Answer 6

Automatically Upload CSS After Sass is Compiled.

1. Installare: gem install net-ssh gem install net-sftp

2. Aggiunga al config.rb:

`

require 'net/ssh' 
require 'net/sftp' 

http_path = "/" 
css_dir = "/" 
sass_dir = "/sass" 
images_dir = "images" 
javascripts_dir = "js" 

output_style = :expanded 
environment = :development 

remote_theme_dir_absolute = '/path/to/where/you/want/to/save/the/file/on/remote/server' 

sftp_host = 'your-host.com' # Can be an IP 
sftp_user = 'your-user.com' # SFTP Username 
sftp_pass = 'xxxxxxxxxxx' # SFTP Password 

on_stylesheet_saved do |filename| 

    Net::SFTP.start(sftp_host, sftp_user , :password => sftp_pass) do |sftp| 
    puts sftp.upload! '/path/to/local/style.css', remote_theme_dir_absolute + '/' + 'style.css' 
    end 
    puts ">>>> Compass is polling for changes. Press Ctrl-C to Stop" 
end 

`

Solo per ftp:

require 'net/ftp' 


http_path = "/" 
css_dir = ".." 
sass_dir = ".." 
images_dir = "images" 
javascripts_dir = "js" 

project_type = :stand_alone 
output_style = :compressed 
line_comments = false 
environment = :development 

ftp_host = 'your-host.com' # Can be an IP 
ftp_user = 'your-user' # FTP Username 
ftp_pass = 'xxxxxxxxx' # FTP Password 

TXT_FILE_OBJECT = File.new('/path/to/local/style.css') 

on_stylesheet_saved do |filename| 
    Net::FTP.open(ftp_host, ftp_user , ftp_pass) do |ftp| 
    ftp.putbinaryfile(TXT_FILE_OBJECT, "/path/on/remote/server/#{File.basename(TXT_FILE_OBJECT)}") 
    end 
    puts ">>>> Compass is polling for changes. Press Ctrl-C to Stop" 
end 

Change dirs e percorsi dei file per la vostra ...