ПредишенСледващото

Здравейте, казвам се Стас. Аз съм на сайтовете на програмист в 1C-Битрикс. В този пост искам да споделя опита си, как се работи с IDE PhpStorm и отдалечения уеб сървъра.

По-долу ще бъде описание на това как да се създаде нов проект и да го свържете към отдалечен уеб сървър или хостинг. Аз също ще се показва как да настроите вида на софтуер за обработка - Sass. автоматична компилация в CSS, без компилаторът, IDE е в състояние да направи всичко на себе си.

Създаване на нов проект

Например, създайте папка на вашия работен плот и го наричат ​​проекта. Той и ще запази цялата структура на нашия уебсайт. Това е много полезна стъпка, всички файлове на проекта ще се съхраняват както локално и отдалечено. Сега започваме PhpStorm и изберете - Open.

Phpstorm, подходяща конфигурация за уеб-дизайн

След това трябва да укажете пътя, където е нашият проект. В моя случай, тази папка проект на работния плот. Вие може да бъде абсолютно всяко място, на вашия компютър. След това отвори работа интерфейс.

От лявата страна имаме един проект локална папка проект, докато тя е празна, в ляво ще бъде една и съща отдалечения сървър, нека да го свържете.

Свързване към сървъра

За да направите това, в менюто в горната, изберете Tools> Внедряване> Преглед на отдалечен хост. Това действие, което наричаме раздела отдалечен хост, който ще се покаже структурата на папките на дистанционното проекта. Тя трябва да се появи в дясно.

Phpstorm, подходяща конфигурация за уеб-дизайн

Натиснете бутона за да добавите нов проект.
Phpstorm, подходяща конфигурация за уеб-дизайн

Това отваря прозорец, в който трябва да натиснете +, въведете името на новата връзка, тя може да бъде произволно, обикновено пиша името на домейна на сайта. На следващо място, посочете желания тип връзка със сървъра, в моя случай - това SFTP.

Phpstorm, подходяща конфигурация за уеб-дизайн

След като е определено име и връзка тип, първият от които е на стойност обръща внимание на е възможността за инсталиране на отметка точка - Видим само за този проект. Ако оставите активна позиция, а след това тази връзка ще бъде видимо само за този проект, ако го махна за всички нови проекти. Винаги съм се изключи тази опция.

Влизаме IP на сървъра или име на хост, посочете потребителско име и парола за връзката. Съветвам ви да сложите отметка в полето - Запазване на парола, когато отново връзка не е да въведете паролата отново.

Phpstorm, подходяща конфигурация за уеб-дизайн

Също така в този раздел, трябва да се обърне внимание на още две копчета. Тя - Тест SFTP връзка, тя ви позволява да тествате новата връзка със сървъра. И Автоматично - този бутон, ако щракнете върху него, изберете автоматично пътя към нашия проект, но като правило не е точна, съветвам го да посочите ръчно, като кликнете върху трите точки до бутона.

Phpstorm, подходяща конфигурация за уеб-дизайн

След това отидете в същия прозорец на раздела на съответствия, оставя всичко, тъй като е само във второто поле показва, наклонена черта.

Phpstorm, подходяща конфигурация за уеб-дизайн

Третата вноска - Изключени Пътища, ни позволява да добавяте файлове или папки, които искаме да се забрани за обмен със сървъра. В този пример, аз нямам.

Промяна Съобщение

След като сме създали нова връзка, аз ви посъветва да гледам в настройката му - Tools> Options> Внедряване

Phpstorm, подходяща конфигурация за уеб-дизайн

Тук е необходимо да се обърне внимание на опция - Качи променени файлове автоматично. Това ни позволява да изберете как да запазите данните към отдалечен сървър ще се случи.

Никога не - никога не ще.

Винаги - винаги ще бъде.

На изрична спаси действие CMD-S - натискате клавишите за бърз достъп за MAC е - Cmd + S, за прозорци - Ctrl + S. Съветвам ви винаги да изберете тази опция. Това означава, че докато не натиснете желаната комбинация от клавиши, промените, които са направени, не отлитат на сървъра.

Друг чудесен вариант е - Качване на външни изменения, като ви позволява да включите следене на климата във всички проектни файлове. Това означава, че ако имаме три файлове и в трите променихме нещо, а след това натиснете CMD-ите, сървърът ще лети всички промени на три файлове. Ако сте на вашия проект ще използва Sass, тогава аз ви съветвам да го остави активен.

Phpstorm, подходяща конфигурация за уеб-дизайн

Sass, настройка компилация PhpStorm

Според един пример, ще покаже как можете бързо и лесно да конфигурирате компилация Препроцесорът в рамките на проекта на PhpStorm.

Да се ​​създаде например файл с .sass разширение, ако предпочитате .less или .scss може да ги създаде.

Phpstorm, подходяща конфигурация за уеб-дизайн

След създаването му, IDE автоматично ще ни подкани да добавите Watcher - е един вид наблюдател на нашия файл .sass. Нека да го добавите.

Phpstorm, подходяща конфигурация за уеб-дизайн

Отваря се нов прозорец с настройките, аз съм тук да оставите всичко както е, щракнете върху OK. Разбира се, ако използвате предпроцесорни, те трябва да бъдат инсталирани на вашата система в световен мащаб.

Phpstorm, подходяща конфигурация за уеб-дизайн

Сега нека да бъдем някои стилове в нашия файл, за да се провери как компилация CSS.

Phpstorm, подходяща конфигурация за уеб-дизайн

Имайте предвид, че нашите прикачени файлове автоматично се появяват с компилирани файлове и main.css main.css.map, ако сте отворени main.css, можем да видим, че в съставянето на CSS работи добре.

Phpstorm, подходяща конфигурация за уеб-дизайн

След това просто се свържете main.css в главата на нашия проект и тихо писане стилове Sass файл. Искам да напомня PhpStorm да следите всички промени по файловете автоматично се включват Качи външни изменения вариант, за който писах по-горе.

Това е в общи линии всичко това е доста проста. Въпреки, че този пост и се оказа доста обемен, всички първоначалната настройка отнема по-малко от пет минути. Работата в PhpStorm, това е чудесен IDE, в която най-различни настройки, които ще направят живота ви по-лесно и да ви спести време при разработването на уеб сайтове.

Свързани статии

Подкрепете проекта - споделете линка, благодаря!