Що таке резонансний робочий процес для проектування веб-сайтів?


9

Минув час, коли я зробив будь-яку істотну розробку веб-сторінок, і я хотів би скористатися останніми методами, але я намагаюся візуалізувати робочий процес, щоб включити все.

Ось що я хочу використовувати:

  • Рамка CakePHP
  • jsmin (JavaScript Minify)
  • SASS (Синтактично дивовижні таблиці стилів)
  • Git

CakePHP:

Досить пояснити, внести зміни та оновити джерело.

jsmin:

Коли ви модифікуєте скрипт, чи вручну запускаєте jsmin для виведення нового мінімізованого коду, чи було б краще запустити гак, який попередньо здійснює, що автоматично генерує jsmin виводи файлів javascript, які були змінені. Припустимо, що я не знаю, як реалізувати гачки.

SASS:

Мені дуже подобається, що може запропонувати SASS, але я також знаю, що код SASS не підтримується браузерами за замовчуванням, тому в певний момент код SASS потрібно перетворити на звичайний CSS. У який момент робочого процесу це робиться.

Git

Я з жахом визнаю це, але останній раз, коли я робив якусь істотну веб-розробку, я не використовував управління джерелами SCM (IE, я використовував управління джерелом, але він складався з дуже докладного журналу змін із резервними копіями).

З тих пір я мав багато досвіду використання Git (а також mercurial і SVN) для розробки на робочому столі, але мені цікаво, як найкраще реалізувати його для веб-розробки).

Чи загальноприйнята практика впроваджувати віддалений сховище на веб-хості, щоб я могла натиснути зміни безпосередньо на виробничий сервер, чи є якийсь інструмент крос-платформи (windows / linux), який спрощує завантаження лише змінених файлів на виробничий сервер . Чи є веб-хостингові компанії, які спрощують реалізацію віддаленого сховища, чи потрібен мені SSH доступ тощо?

Я знаю, як це досягти на власному сервері тестування з віддаленим сховищем з окремою гілкою віддаленого відстеження, але я ніколи цього не робив на сервері віддаленого веб-хостингу, тому я ще не знаю про варіанти.

Додатково:

Я розглядав можливість реалізації рамки javascript, де окремі файли javascript, які використовуються на сторінці, збираються в один файл для кожної сторінки на виробничому сервері, щоб обмежити кількість завантажень файлів, необхідних на одну сторінку.

Чи щось подібне вже існує? Чи є вже проект з відкритим кодом у природі, який реалізує щось подібне, що я міг би використати та сприяти?

З огляду на те, наскільки параноїдальні веб-розробники відносяться до продуктивності (і той факт, що кількість запитів на файли на веб-сайті є великим хітом для продуктивності), я здогадуюсь, що в мережі є якийсь хакер-майстер, який вже вирішив цю проблему.

Відповіді:


2

Ви можете перевірити розширення PageSpeed ​​Google для Apache : afaik, є можливість автоматично агрегувати та мінімізувати Javascript та CSS та поєднувати з кешуванням, це буде відповідати тому, що ви згадуєте, що шукаєте в кінці своєї публікації.


1
Класно, я не розумів, що все це можна зробити за допомогою одного модуля Apache. Мінімізація Javascript / css, з'єднання javascript / css, а також купа інших необов'язкових поліпшень продуктивності. Після деякого Googling я навіть з'ясував, що Dreamhost надає їм спільний / VPN хостинг. Я здивований, що на веб-майстрах.stackexchange.com чи stackoverflow.com немає більше інформації про це.
Еван Плейс

5

jsmin

Якщо у вас немає тонни JS, ви можете налаштувати щось, щоб зменшити щоразу, коли натискаєте зберегти. Якщо у вас багато JS, зробіть це частиною вашого процесу розгортання (див. Git нижче).

SASS

Використовуйте рамку Compass . Він включає SASS, а також невеликий сценарій, який "переглядає" ваш каталог SASS і збирає файли в CSS (включаючи мінімізований CSS, якщо хочете) щоразу, коли ви зберігаєте. Він створений з урахуванням RoR, але ви можете легко використовувати його з будь-якою веб-рамкою, створивши конфігураційний файл Compass і запустивши команду "watch compass". Компас також включає в себе безліч інших зручних інструментів, таких як Blueprint , корисні міксини та автоматичне спрайтування генерації через плагін Lemonade (який має бути вбудований у Compass у наступному випуску ).

Git

Залежно від розміру / складності сайту, подумайте про дотримання Capistranoмодель розгортання. Не впевнений, чи можна використовувати Capistrano безпосередньо з CakePHP, але суть у цьому: кожен сервер виробництва має "поточну" папку, яка містить увесь код, який працює у виробництві на той момент. Кожен раз, коли ви хочете розгорнути новий код, ви запускаєте скрипт, який виконується на кожному виробничому сервері, і він (а) копіює вміст "поточної" папки в резервну папку (з ім'ям випуску / часовою позначкою на ній), ( b) перевірте останній код із Git у папку "поточна" та (c) почніть подавати цей новий код із "поточної" папки. Таким чином, ви можете повернутись до будь-якого попереднього випуску, якщо це необхідно, і ви зможете точно сказати, яка редакція працює у виробництві. Capistrano також дозволяє додавати всілякі спеціальні завдання як частину процесу розгортання, включаючи мініфакцію JS / CSS,

Додатково

Так, є купа. Google на кшталт "CSS / JS concat". Ось швидкий, який я знайшов для CakePHP: Asset Packer .


Дякую за вклад. Мені дуже подобається те, що я бачив із Compass Framework. Я хотів би лише знати, що я знав спосіб розгортати його в PHP. Я гуглився навколо, але не можу знайти альтернативу. Capistrano також виглядає дуже цікаво, але замість дорогої і крихкої моделі копіювання файлів я просто використовую ssh, щоб сказати клієнту git на всіх віддалених серверах, щоб зробити швидкий 'git pull --rebase' після перевірки, що він працював на тестуванні перший сервер.
Еван Плейс

(продовження) Пакувальник активів також виглядає дуже цікаво. Єдиною причиною, коли я вибрав іншу відповідь над вашою, було те, що вона містила все це в один кадр, при цьому обробка виконується на самому сервері (тому зайві сценарії не потрібні). Єдиним недоліком, який я бачу на швидкості сторінки, є додана обробка статичного контенту (яку легко вирішити за допомогою кешування статичного вмісту та / або CDN. Я дуже хочу, щоб я міг прийняти 2, оскільки у вашій відповіді є багато цінної інформації.
Еван Плейс

Ви не "розгортаєте" рамку Compass за допомогою PHP. Ви просто запускаєте його під час кодування, він збирає ваші CSS-файли кожного разу, коли ви натискаєте зберегти, а файли CSS - це те, що насправді розгортається. Щоб "запустити" компас, спочатку потрібно створити конфігураційний файл (compass.rb) - використовувати це для створення параметрів командного рядка: jsfiddle.net/chriseppstein/PG46q/3 . Після того, як у вас буде налаштовано конфігураційний файл з усіма вашими контурами, просто запустіть "годинник компаса" в тій самій папці, що і конфігураційний файл, і компас почне перекомпілювати свій SASS кожен раз, коли ви натиснете на збереження. Спробуйте в якомусь побічному проекті: ДУЖЕ легко і швидко.
Євгеній Брікман

Крім того, наскільки я знаю, Capistrano не дуже копіює. Кожен раз, коли ви розгортаєте, він перевіряє останній код і просто поміняє назви папок. Перевага полягає в тому, що ви завжди можете повернутись до попередньої версії, просто знову поміняючи імена папок.
Євгеній Брікман

Я знайшов статтю про те, як підняти її та працювати в PHP. Це легше використовувати поза проектом Ruby, ніж я очікував. Почеркніть мій останній коментар про Capistrano. Я думав, що це використовується для відправки розподіленої команди на декілька серверів. Якщо у мене є ssh доступ до віддалених серверів, я б швидше кинув git-клієнт як засіб для виведення останніх змін із виробничої галузі. IMHO, обмін папками - це погана ідея. Я б вважав за краще тег на версії у циклі випуску та просто перевіряв попередній тег, якщо в поточному є проблеми.
Еван Плейс
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.