2011-09-19 16 views
7

पर अपलोड करें मैं सीएसएस से SASS तक एक फ्रंट एंड डेवलपर संक्रमण कर रहा हूं। मुझे अपनी स्थानीय मशीन पर रूबी और कम्पास स्थापित है, और कम्पास "घड़ी" खूबसूरती से काम कर रहा है।स्थानीय रूप से SASS का विकास करें,

हालांकि, मैं अभी भी स्थानीय सीएसएस फाइलों के साथ समाप्त होता हूं, जो कि परिवर्तन के बारे में देखने के लिए प्रत्येक छोटे बदलाव के बाद मुझे मैन्युअल रूप से सर्वर पर एफ़टीपी करना पड़ता है। मैं इसे स्वचालित करना चाहता हूं।

मुझे this thread मिला जो आरएसआईएनसी का उपयोग करने का सुझाव देता है, लेकिन मैं विंडोज का उपयोग करता हूं और मुझे लगता है कि आरएसआईएनसी स्थापित करना वास्तव में मुश्किल होगा।

क्या रूबी का उपयोग करके इसे स्वचालित करने का कोई तरीका है? वर्कफ़्लो मैं प्राप्त करने का प्रयास कर रहा हूं:

  1. मैं वीआईएम में एससीएसएस फ़ाइल को सहेजता हूं।
  2. कम्पास घड़ी परिवर्तन का पता लगाता है और एक नया CSS फ़ाइल
  3. कुछ जादुई उपकरण सीएसएस फ़ाइल के लिए परिवर्तन का पता लगाता संकलित, अपने सर्वर में अपलोड के
  4. मैं क्रोम पर स्विच, F5 मारा, और परिवर्तन देखने

मैं चरण 3 को छोड़कर सबकुछ कर सकता हूं। कोई विचार? (इसमें लिनक्स या मैक-केवल सॉफ्टवेयर शामिल नहीं है?)

उत्तर

2

के बाद से सवाल 2011 कम्पास में पूछा गया था विकसित किया गया है और अब callback functions प्रदान करता है वास्तव में क्या सवाल में पूछा गया था करने के लिए:

के लिए चरण 3 आप उत्पादन सर्वर पर अपने * .css और * .css.map फ़ाइलों को अपलोड करने के लिए on_stylesheet_saved और on_sourcemap_saved कॉलबैक फ़ंक्शंस का उपयोग कर सकते हैं।

नमूना कोड ऐसा करने के तरीके इस StackOverflow answer

+0

धन्यवाद! मैं यहां अद्यतन की सराहना करता हूं। – ezuk

0

सबसे सरल समाधान स्थानीय रूप से विकसित करना होगा (जैसा कि एक सर्वोत्तम अभ्यास है)। अपने कंप्यूटर पर एक वेब सर्वर चलाएं (विंडोज़ के लिए एक्सएएमपी आज़माएं) और सभी परिवर्तन तुरंत अपलोड किए बिना दिखाई देंगे। जब आप पूरा कर लें तो केवल अपलोड करें।

+2

कि सिद्धांत रूप में सुंदर लग रहा है में पाया जा सकता है, लेकिन मैं किसी मौजूदा वेबसाइट जो बहुत बड़े, डेटाबेस समर्थित, और गतिशील रूप से उत्पन्न पर काम कर रहा हूँ। इसे स्थानीय रूप से मिरर करना मेरे परिदृश्य के लिए एक विकल्प नहीं है ... – ezuk

+0

मैंने वास्तव में यह कुछ और विचार दिया, और फैसला किया कि मैं इस समाधान के एक संस्करण का उपयोग करूंगा। एक वेबसर्वर चलाने की बजाय, मैं सिर्फ जेनरेट किए गए वेबपृष्ठ को साइट से HTML के रूप में सहेज दूंगा, और इसके खिलाफ स्थानीय रूप से विकसित करूंगा। अपना जवाब स्वीकार करते हुए, धन्यवाद! – ezuk

+0

मुझे पता है कि यह एक बड़ी परियोजना को पाने और स्थानीय रूप से चलने के लिए दर्द हो सकता है, लेकिन अधिकतर आप खुश नहीं होंगे कि आप अंत में ऐसा करेंगे। आपका समाधान ठीक स्टाइल जैसा ही ठीक दिखता है। सौभाग्य! – Roy

1

मैं सैस (एससीएसएस) में विकसित होने और रिमोट देव साइट पर पूर्वावलोकन करने जैसी समान स्थिति में हूं। विंडोज़ पर विकास करते समय मैं सुरक्षित रूप से सहेजने के लिए एफ़टीपी-सिंक प्लगइन के साथ संपादित करने के लिए सब्लिमे टेक्स्ट 2 का उपयोग करता हूं।

इस प्लगइन में फ़ाइल के लिए देखे गए फ़ोल्डरों को ध्वजांकित करने का एक सुविधाजनक विकल्प है जो अपलोड करने के लिए और फ़ाइल परिवर्तनों के लिए एक अलग पथ की जांच करने के लिए ट्रिगर करता है। तो आप अपने एसएसएस फ़ोल्डर को ध्वजांकित कर सकते हैं, एक एसएसएस फ़ाइल में परिवर्तन कर सकते हैं और सहेज सकते हैं, जो सीएसएस फ़ोल्डर को देखने के लिए एसटी 2 को अलर्ट करता है (आप संकलन के लिए पर्याप्त समय की अनुमति देने में देरी में निर्माण कर सकते हैं) और किसी भी बदली गई फाइलें अपलोड कर सकते हैं।

दिए गए प्रोजेक्ट के लिए सॉफ़्टवेयर और एफ़टीपी सिंक के सेटअप के सेटअप के बाद, आपके कार्यों को 1) संपादित करें और सहेजें, 2) कुछ सेकंड प्रतीक्षा करें, 3) परिवर्तन देखने के लिए ब्राउज़र रीफ्रेश करें। (यदि साइट इस बिंदु पर टूटी हुई दिखती है तो आपको दूसरी बार देरी सेटिंग को बढ़ाने की आवश्यकता हो सकती है और दूसरी बार प्रक्रिया को ट्रिगर करने के लिए फ़ाइल को फिर से सहेजने की आवश्यकता हो सकती है।)

मुझे यकीन नहीं है कि इसे अन्य प्लेटफॉर्म पर कैसे पूरा किया जाए एक दूरस्थ साइट, हालांकि मुझे आश्चर्य है कि कोडा 2 में कुछ विकल्प हैं जो मैक ओएस उपयोगकर्ताओं के लिए काम कर सकते हैं।

+1

मैक और लिनक्स पर शानदार काम भी –

11

मैं रॉय और एडम से असहमत हूं, वर्डप्रेस थीम के साथ काम करते समय, मैं रिमोट देव सर्वर पर विकसित होता हूं। मेरे पास सामग्री और अन्य संपादन जोड़ने वाले लोगों की एक टीम है जो डेटाबेस को अपडेट करती है, डेवलपर को स्थानीय रूप से 100% समय पर काम करना मुश्किल होगा। सामग्री के साथ अद्यतन होने वाली उनकी एसक्यूएल फ़ाइल मेरे एसक्यूएल फ़ाइल (आप थीम विकल्प सेटिंग्स और क्या नहीं जानते) के साथ तथ्य के बाद सुपर अच्छी तरह से जाल नहीं करेंगे।

मैंने अब तक इस कारण से SASS का उपयोग करने से बचा है।

मेरा इष्टतम वर्कफ़्लो मेरी स्कैस फ़ाइल को संपादित करना होगा -> ऑटो को संकलित करना सीएसएस -> खोज पर ऑटो अपलोड (जैसे सहेजने पर अपलोड की तरह) -> लाइवरेलोड होता है और मुझे संपादन दिखाई देता है (मैं इसके बिना रह सकता हूं अंतिम चरण)।

मैंने अभी तक इसका प्रयास नहीं किया है, लेकिन मुझे यह लिंक मिला है जो अब तक का सबसे नज़दीकी उत्तर प्रतीत होता है। Using SASS with Remote Setup

साइड नोट: स्थानीय रूप से कार्य करना हमेशा एक इष्टतम सेट अप नहीं होता है। यह कोई जवाब नहीं है और यह 8 वें समय के बारे में मैंने इस प्रश्न को समान उत्तरों के साथ देखा है।

अद्यतन: बस कोडेकिट के बिना बस कोशिश की - बस और यह बहुत अच्छा काम किया!

किसी अन्य अद्यतन: मैंने सैस और रिमोट डेवलपमेंट को संभालने के तरीके को और संशोधित किया है। मुझे पता है कि सब्लिमे का उपयोग करें, एक ही समय में मेरी .scss और .css फ़ाइल खोलें। मैं फिर एसएफटीपी (उत्कृष्टता के लिए एक पैकेज) का उपयोग "मॉनीटर फ़ाइल" करने के लिए करता हूं जो सीधे फ़ाइल को संपादित करने के बाहर फ़ाइल में बदलावों की तलाश करेगा, फिर मैं टर्मिनल खोलता हूं और अपनी स्कैस फ़ाइल को एसस करता हूं, अब हर बार जब मैं इसे सहेजता हूं तो स्थानीय रूप से इसका पालन करता है और फिर मेरे सर्वर पर संकलित सीएसएस फ़ाइल ऑटो अपलोड! उम्मीद है कि समझ में आता है, शायद मैं एक वीडियो दिखाऊंगा।

+0

पोस्ट पुनरुत्थान के लिए खेद है लेकिन अच्छा समाधान। काफी समय के लिए उत्कृष्टता का उपयोग कर रहे थे और sftp में "मॉनीटर फ़ाइल" कभी नहीं देखा। मैं scss फ़ाइल देखने के लिए टर्मिनल में कंपास का उपयोग कर रहा हूं जो बहुत अच्छा काम करता है ... प्रभावी रूप से वही मुझे विश्वास है। – visyoual

+0

मैं मानसिक रूप से इस माध्यम से कदम उठा रहा था, और फिर उस मुद्दे को गुमराह कर रहा था जिसे मैं सुनिश्चित करना चाहता था ... और इस पोस्ट ने मुझे काम करने के लिए "सही काम किया, यह काम करना चाहिए", और निश्चित रूप से यह किया। धन्यवाद: डी – danjah

1

मेरे अनुभव में सबसे अच्छा तरीका है इस तरह से काम करने के लिए है:

1. आप कहीं एक साइट है - और यह वास्तव में कहाँ और कैसे जटिल इस साइट है नहीं मायने रखती है;
2. आपके पास इन SASS फ़ाइलों से उत्पन्न स्थानीय SASS फ़ाइलें और सीएसएस है;
3. फिडलर 2 (वेब ​​प्रॉक्सी)
स्थापित करें 4. इसे सीएसएस फ़ाइल के लिए अनुरोध पकड़ने के लिए कॉन्फ़िगर करें और अपनी स्थानीय सीएसएस फ़ाइल के साथ प्रतिक्रिया को प्रतिस्थापित करें।

तो, जैसा कि आप देख सकते हैं, आप दूरस्थ एक के बजाय स्थानीय सीएसएस फ़ाइल का उपयोग कर सकते हैं। इसलिए जब भी आप SASS बना रहे हों तो सीएसएस अपलोड करने की कोई आवश्यकता नहीं है।

1

Automatically Upload CSS After Sass is Compiled

  1. स्थापित करें: gem install net-ssh gem install net-sftp

  2. जोड़ें 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 

`

केवल एफ़टीपी के लिए:

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 

dirs और तुम्हारा करने के लिए फ़ाइल पथ बदलें ...

संबंधित मुद्दे