웹앱 디자인을위한 적절한 워크 플로우


9

실질적인 웹 개발을 수행한지 오래되었지만 최신 방식을 활용하고 싶지만 모든 것을 통합하기 위해 워크 플로를 시각화하는 데 어려움을 겪고 있습니다.

내가 사용하고자하는 것은 다음과 같습니다.

  • CakePHP 프레임 워크
  • jsmin (자바 스크립트 축소)
  • SASS (동 기적으로 멋진 스타일 시트)
  • 힘내

CakePHP :

자체 설명이 필요하며 수정하고 소스를 업데이트하십시오.

jsmin :

스크립트를 수정할 때 jsmin을 수동으로 실행하여 새로운 축소 된 코드를 출력하거나 변경된 javascript 파일의 jsmin 출력을 자동으로 생성하는 사전 커미트 후크를 실행하는 것이 좋습니다. 커밋 후크 구현에 대한 지식이 없다고 가정합니다.

SASS :

SASS가 제공하는 것을 정말로 좋아하지만 SASS 코드는 기본적으로 브라우저에서 지원되지 않으므로 SASS 코드를 일반 CSS로 변환해야한다는 것을 알고 있습니다. 워크 플로의 어느 시점에서이 작업이 수행됩니다.

힘내

나는 그것을 인정하게되어 무서워하지만 마지막으로 실질적인 웹 개발을 할 때 SCM 소스 제어를 사용하지 않았습니다 (IE, 소스 제어를 사용했지만 백업과 함께 매우 상세한 변경 로그로 구성됨).

그 후 데스크톱 개발에 Git (수은 및 SVN)을 사용한 경험이 많았지 만 웹 개발에 가장 적합한 방법을 궁금합니다.

변경 사항을 프로덕션 서버에 직접 푸시 할 수 있도록 웹 호스트에 원격 저장소를 구현하는 것이 일반적입니까, 아니면 변경된 파일 만 프로덕션 서버에 쉽게 업로드 할 수있는 크로스 플랫폼 (windows / linux) 도구가 있습니까? . 원격 저장소를 쉽게 구현할 수있는 웹 호스팅 회사가 있습니까? SSH 액세스 등이 필요합니까?

별도의 원격 추적 분기가있는 원격 저장소를 사용하여 자체 테스트 서버 에서이 작업을 수행하는 방법을 알고 있지만 아직 원격 프로덕션 웹 호스팅 서버에서 수행 한 적이 없으므로 옵션을 아직 알지 못합니다.

특별한:

페이지에 사용되는 별도의 JavaScript 파일이 프로덕션 서버의 각 페이지에 대해 단일 파일로 컴파일되어 페이지 당 필요한 파일 다운로드 수를 제한하는 Javascript 프레임 워크 구현을 고려하고있었습니다.

이와 같은 것이 이미 존재합니까? 내가 사용하고 기여할 수있는 비슷한 것을 구현하는 오픈 소스 프로젝트가 이미 있습니까?

편집증 웹 개발자가 성능에 대해 어떻게 생각하는지 (그리고 웹 사이트의 파일 요청 수가 성능에 큰 영향을 미친다는 사실을 고려할 때) 이미이 문제를 해결 한 마법사 해커가 인터넷에 있다고 생각합니다.

답변:


2

Apache의 Google PageSpeed ​​확장 프로그램을 확인하십시오 . afaik, Javascript 및 CSS를 자동으로 집계 및 축소하고 캐싱과 결합하는 옵션이 있습니다. 이는 게시물 끝에 언급 한 내용에 적합합니다.


1
쿨, 나는이 모든 것이 하나의 Apache 모듈로 수행 될 수 있다는 것을 몰랐습니다. Javascript / css 축소, javascript / css 연결 및 기타 선택적 성능 향상. 인터넷 검색 후 Dreamhost가 공유 / VPN 호스팅을 제공한다는 것을 알았습니다. webmasters.stackexchange.com 또는 stackoverflow.com에 더 많은 정보가 없다는 것에 놀랐습니다.
Evan Plaice

5

jsmin

JS가 많지 않으면 save를 누를 때마다 최소화하도록 무언가를 설정할 수 있습니다. JS가 많으면 배포 프로세스의 일부로 만드십시오 (아래 Git 참조).

SASS

나침반 프레임 워크를 사용하십시오 . 여기에는 SASS와 SASS 디렉토리를 "감시"하고 저장할 때마다 파일을 CSS (원하는 경우 축소 된 CSS 포함)로 컴파일하는 작은 스크립트가 포함됩니다. RoR을 염두에두고 작성되었지만 Compass 구성 파일을 작성하고 "compass watch"명령을 실행하여 모든 웹 프레임 워크에서 쉽게 사용할 수 있습니다. 또한 컴퍼스에는 레모네이드 플러그인을 통해 블루 프린트 , 유용한 믹스 인 및 자동 스프라이트 생성 ( 다음 릴리스 에서 컴퍼스에 내장되어야 함) 과 같은 기타 편리한 도구가 많이 포함되어 있습니다 .

힘내

부지의 크기 / 복잡도에 따라 Capistrano를 따르는 것을 고려하십시오배포 모델. CakePHP와 함께 Capistrano를 직접 사용할 수 있는지는 확실하지 않지만 요점은 다음과 같습니다. 각 프로덕션 서버에는 "현재"폴더가 있습니다.이 폴더에는 해당 시점에 프로덕션에서 실행중인 모든 코드가 들어 있습니다. 새 코드를 배포 할 때마다 각 프로덕션 서버에 ssh를 사용하는 스크립트를 실행하고 (a) "현재"폴더의 내용을 백업 폴더 (릴리스 이름 / 타임 스탬프가있는)로 복사합니다. b) Git에서 "current"폴더로 최신 코드를 확인하고 (c) "current"폴더에서이 새 코드를 제공하기 시작합니다. 이렇게하면 필요한 경우 이전 릴리즈로 롤백 할 수 있으며 프로덕션 환경에 어떤 버전이 있는지 정확히 알 수 있습니다. Capistrano는 또한 JS / CSS 축소를 포함하여 배포 프로세스의 일부로 모든 종류의 사용자 정의 작업을 추가 할 수 있습니다.

특별한

예, 무리가 있습니다. "CSS / JS concat"과 같은 Google 여기 CakePHP : Asset Packer에 대한 간단한 정보가 있습니다.


입력 해 주셔서 감사합니다. Compass Framework에서 본 것을 정말 좋아합니다. PHP로 배포하는 방법 만 알고 싶었습니다. 나는 주변을 봤지만 대안을 찾을 수 없습니다. Capistrano도 매우 흥미로워 보이지만 비싸고 깨지기 쉬운 파일 복사 모델 대신 ssh를 사용하여 모든 원격 서버의 git 클라이언트에게 테스트에서 작동했는지 확인한 후 빠른 'git pull --rebase'를 수행하도록 지시합니다. 먼저 서버.
Evan Plaice

(계속) 에셋 패커도 매우 흥미로워 보입니다. 내가 당신에게 다른 대답을 고른 유일한 이유는 서버 자체에서 처리가 완료되어 한 번에 모든 것을 포함했기 때문입니다 (따라서 추가 스크립트가 필요하지 않음). Pagespeed에서 볼 수있는 유일한 단점은 정적 컨텐츠의 추가 처리 (정적 컨텐츠 캐싱 및 / 또는 CDN을 사용하여 쉽게 해결됨)입니다. 귀하의 답변에 많은 귀중한 정보가 있으므로 2를 수락 할 수 있기를 바랍니다.
Evan Plaice

PHP로 Compass 프레임 워크를 "배치"하지 마십시오. 코드를 작성하는 동안 실행하면 save를 누를 때마다 CSS 파일이 컴파일되고 CSS 파일이 실제로 배포됩니다. 나침반을 "실행"하려면 먼저 구성 파일 (compass.rb)을 생성해야합니다. jsfiddle.net/chriseppstein/PG46q/3 명령 줄 옵션을 생성하려면이 파일을 사용하십시오 . 모든 경로를 사용하여 구성 파일을 설정 한 후에는 구성 파일과 동일한 폴더에서 "compass watch"를 실행하면 저장을 누를 때마다 나침반이 SASS를 다시 컴파일하기 시작합니다. 일부 측면 프로젝트에서 사용해보십시오. 매우 쉽고 빠릅니다.
예브게니 Brikman

또한 내가 아는 한 Capistrano는 많은 복사 작업을 수행하지 않습니다. 배포 할 때마다 최신 코드를 확인하고 폴더 이름 만 바꿉니다. 폴더 이름을 다시 바꾸면 항상 이전 버전으로 롤백 할 수 있다는 장점이 있습니다.
예브게니 Brikman

PHP에서 시작하고 실행하는 방법에 대한 기사를 찾았습니다. 예상보다 Ruby 프로젝트 외부에서 사용하는 것이 더 쉽습니다. Capistrano에 대한 나의 마지막 코멘트를 긁어 라. 여러 서버에 분산 명령을 보내는 데 사용되었다고 생각했습니다. 원격 서버에 ssh 액세스 권한이 있으면 프로덕션 브랜치에서 최신 변경 사항을 가져 오는 수단으로 git 클라이언트를 삭제하는 것이 좋습니다. IMHO, 폴더 교환 폴더는 나쁜 생각입니다. 릴리스주기에서 수정 버전에 태그를 지정하고 현재 태그에 문제가있는 경우 이전 태그를 체크 아웃하는 것이 좋습니다.
Evan Plaice 2019
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.