Foundation 6의 CLI 도구를 시작합니다

기초 6 명령 줄 도구 시작 가이드

Foundation 6은 다양한 방법과 도구를 제공합니다. 정적 파일을 다운로드하거나 Yeti Launch를 사용할 수 있습니다 (Mac 용 데스크톱 응용 프로그램, Windows 버전이 곧 제공됨). 는 그 재단 6이 또한 명령 줄 도구 세트를 제공하는 것으로 알려져 있습니다.이 기사에서 설명 할 것입니다. Foundation 6은 많은 CSS 기능 및 JavaScript 플러그인 외에도 강력한 개발자 도구를 갖춘 매우 유연한 프론트 엔드 프레임 워크입니다.

키 포인트

Foundation 6은 SCSS 컴파일, 연결, 압축, 이미지 최적화 및 템플릿을 포함하여 개발자에게 빌드 프로세스를 더 잘 제어 할 수있는 명령 줄 도구 세트를 제공합니다.

Foundation 6의 CLI 도구를 사용하려면 개발자는 Nodejs, NPM, Git, Gulp 및 Bower를 설치해야합니다.

를 사용하여 Foundation-CLI를 설치할 수 있습니다.

Foundation Cli는 백그라운드에서 Gulp와 Bower를 사용합니다. Gulp는 자동화 된 개발 워크 플로우에서 시간이 많이 걸리는 작업이며 Bower는 개발자가 명령 줄에서 프론트 엔드 라이브러리를 다운로드하여 설치할 수있는 웹 패키지 관리자입니다.

Foundation CLI를 사용하여 개발자는 3 개의 Foundation 프레임 워크 (사이트, 앱 및 이메일)를 위해 빈 템플릿을 다운로드하여 설치할 수 있습니다. 이 템플릿은 Gulp 및 Bower와 함께 작동하도록 미리 구성되어 있습니다.
• Foundation CLI 도구는 브라우저 테스트 및 실시간 재 장전을 동기화하기 위해 BrowserSync로 미리 구성되어 있습니다. 이 기능을 통해 개발자는 여러 장치 및 해상도에서 실시간 변경 사항을 볼 수 있으므로 프론트 엔드 개발 효율성을 향상시킬 수 있습니다.
• Foundation의 CLI 도구는 언제 사용합니까? npm install --global foundation-cli 정적 JavaScript 및 CSS 파일 (매우 잘 작동)을 사용할 수 있기 때문에 CLI 도구를 사용하는 이유는 무엇입니까? 표준 구조와 사용하기 쉬운 프로세스가 필요할 수 있습니다.
나는 당신이 이런 식으로 당신의 목표를 달성 할 수 있다고 생각하지만, 많은 개발자들이 빌드 프로세스에 대한 더 많은 제어를 원한다는 것을 이해합니다. 여기에는 SCSS 컴파일, 연결, 압축, 이미지 최적화 및 템플릿이 포함됩니다. 이 추가 도구를 사용하는 것이 좋습니다. 따라서 경우에 따라 CLI 도구가 더 나은 선택 일 수 있습니다.
• 명령 줄을 자주 사용하고 이와 관련하여 Foundation 6이 무엇을 제공하는지 확신하지 못하거나 명령 줄을 사용하지 않고 새로운 것을 배우고 싶을 수도 있습니다.이 기사는 귀하를위한 것입니다.
• 사용하기
먼저 Nodejs 및 NPM 도구 (일반적으로 Nodejs와 함께 설치)를 설치해야합니다. 또한 Git, Gulp 및 Bower가 필요하며 Foundation-Cli는 이러한 모든 도구를 사용합니다. 설치하려면 다음 명령을 실행할 수 있습니다
• 일부 시스템에서는 특히 전 세계적으로 NPM 패키지를 설치할 때 슈퍼 사용자 액세스가 필요할 수 있으므로이 기사에 설명 된 명령을 사용하기 전에
를 사용해야 할 수도 있습니다.

Foundation-Cli 설치 컴퓨터에 이미 Foundation 5 CLI가 설치되어있는 경우 명령 줄 환경 구성에 따라 하나의 명령에만 액세스 할 수 있습니다. 따라서 오래된 도구를 먼저 삭제하는 것이 가장 좋습니다. 다음 명령을 사용하여이를 수행 할 수 있습니다 및 새 CLI 도구를 설치하십시오 :

재단 문서에서 설치에 대해 자세히 알아볼 수 있습니다.

시스템에 Foundation-CLI를 설치하고 싶지 않고 과거에 Gulp 및 Bower를 설치 한 경우 Foundation 템플릿이 포함 된 저장소를 복제하고 Foundation 명령 대신 Gulp 및 NPM 명령을 사용하십시오. Foundation-CLI를 사용할 때와 동일해야합니다.

$ npm install --global gulp bower

Foundation CLI는 무엇을 제공합니까?

앞에서 언급했듯이 Foundation Cli는 백그라운드에서 Gulp와 Bower를 사용합니다. Gulp와 Bower는 무엇입니까? Gulp는 개발 워크 플로우에서 지루한 또는 시간 소모적 인 작업을 자동화하는 데 도움이되는 툴킷입니다. 여기서 SCSS 컴파일, 압축, 연결을 고려하고 이미지 압축 또는 기타 유용한 작업을 수행 할 수 있습니다. Bower는 명령 줄에서 프론트 엔드 라이브러리를 다운로드하여 설치할 수있는 웹 패키지 관리자입니다. 예를 들어, jQuery를 설치하려면 가 하나만 있으면됩니다.

Foundation CLI 3 개의 기초 프레임 워크 (사이트, 앱 및 이메일)에 대한 빈 템플릿 다운로드 및 설치. 이 템플릿은 모두 Gulp 및 Bower와 함께 작동 할 준비가되어 있으며 Gulp 작업 및 Bower 설치 소스와 사전 구성됩니다. 이것은 Yeoman과 같은 도구와 유사합니다.

$ gem uninstall foundation
$ npm uninstall --global foundation-cli

Foundation Cli 를 사용하는 Foundation-CLI를 설치 한 후 다음 명령을 실행하여 사용을 시작할 수 있습니다. 보시다시피, 우리는 대신

를 사용하고 있습니다. 또한, 우리는 사이트의 기초 용 Zurb 프리미엄 템플릿 만 살펴 봅니다. 올바른 프레임을 선택하려면 로고를 사용해야하며 올바른 템플릿을 선택하려면 로고를 사용해야합니다. 기본 템플릿을 선택할 수도 있지만 자세히 살펴 보려면 고급 템플릿이 훨씬 좋습니다.

설치 후 프로젝트 폴더가 있어야합니다 (이름은 설치 프로세스 중에 제공됩니다). 또한 모든 종속성을 설치해야합니다. 지금해야 할 일은 새로 생성 된 프로젝트로 가서 폴더로 가서 실행되기 만하면됩니다.

이것은 마법입니다! 이렇게하면 Gulp 빌드 및 서버 작업 및 시계 명령을 실행합니다. 즉, 코드에서 볼 수있는 모든 구성 GULP 작업을 트리거합니다. 따라서이 명령을 실행하면 콘솔에 정보가 표시됩니다. 현재 가장 중요한 정보는 다음과 같습니다.

실행중인 서버에 대한 정보는 다음과 같습니다. 첫 번째는 실제 애플리케이션이며 BrowserSync 테스트를위한 UI 서버도 있습니다 (나중에 논의하겠습니다). 응용 프로그램 파일이 Dist 디렉토리에서 제공되며 브라우저에서 bower install jquery에 액세스하고 Standard Foundation 6 런칭 템플릿을 볼 수 있습니다.

내부 컨텐츠보기

나는 이것이 가장 흥미로운 부분이라고 생각하지만,이 시점에 도달하기 전에 모든 설치 프로세스를 완료해야합니다.

폴더 구조, gulpfile.js, javaScript/css resources 새로 만든 프로젝트의 폴더 구조를 살펴 보겠습니다. 가장 중요한 폴더는

및 입니다. 개발 작업은 주로

폴더에서 수행되며 모든 제작 파일은

폴더에서 준비됩니다. 실행중인 서버는 해당 폴더의 파일도 제공합니다. 즉, 필요에 따라 작업 공간을 준비 할 수 있지만 결국 프로덕션 지원 파일은

폴더에 있으며 이는 완제품으로 제공하려는 폴더에 있습니다.

그래서, 이것은 어떻게 구현됩니까? 여기에서 가장 중요한 문서를 살펴 보겠습니다. Gulp에 익숙하지 않은 경우이 입문 자습서를 확인할 수 있습니다. Gulp는 처음처럼 무섭지 않지만 모든 마법이 일어나는 곳이기 때문에 중요합니다. src Gulp는 간단한 NPM 패키지를 통해 추가 기능을 추가하는 많은 Gulp 플러그인을 기반으로합니다. 이 새로운 재단 프로젝트에서는 dist에 정의되어 있습니다. 또한 src (위에서 언급 한 바와 같이)를 실행할 때 자동 다운로드 및 설치되므로 걱정할 필요가 없습니다. dist Gulp 파일을 열면 각 작업 (예 : Clean, Copy, Sass 및 JavaScript) 이이 특정 작업 부품을 담당하는 특수 GULP 플러그인을 사용하여 유사한 방식으로 정의되는 것을 볼 수 있습니다. 또한 파일 하단에서 볼 수 있듯이 다른 작업을 집계하는 "빌드"또는 "기본값"과 같은 주요 작업이 있습니다. Foundation BoilerPlate은 구성되어 있으므로 기본적으로 아무것도 할 필요가 없습니다. 물론 필요에 따라 조정할 수 있습니다. dist 이 구성을 사용하면

폴더에 SCSS와

폴더에 JavaScript 파일을 쓸 수 있습니다. 이미지를 gulpfile.js 폴더에 배치 할 수도 있습니다. 당신이 또는

를 실행하면,이 모든 파일은 로 구성됩니다. package.json Gulp 구성 및 플러그인은 다른 기사의 주제입니다. 이제 .html 파일을 살펴보고 Panini를 사용하여 고급 레이아웃과 관계를 만듭니다. foundation new 파니니 및 핸들 바 템플릿 Panini는 재단 팀이 제작 한 훌륭하고 간단한 도구입니다. Panini를 사용하면 일관된 레이아웃과 재사용 가능한 섹션이있는 페이지를 만들 수 있습니다.

폴더에는 즉시 사용할 수있는 정적 HTML 파일이 있습니다. 물론 파일이 하나만 있으면 모든 것이 간단합니다. 동일한 부품으로 많은 HTML 파일을 생성하려는 경우 문제가 발생할 수 있습니다. 바닥 글, 사이드 바, 헤더 또는 "부품"이라는 기타 여러 요소 일 수 있습니다.

Panini가 없으면 모든 중복 코드를 각 HTML 파일에 복사해야하며 변경 해야하는 경우 각 파일에서 수동으로 변경하거나 텍스트 편집기에서 찾아서 교체해야합니다. Panini를 사용하면 편집하는 동안 한 곳 에서이 모든 작업을 수행 할 수 있으며 모든 파일은

폴더로 편집 및 복사됩니다. dist 똑같이 중요한 파니니는 핸들 바 템플릿 라이브러리를 기반으로합니다. HTML 파일에서 마크 다운을 컴파일 할 수도 있습니다. Panini에 대한 자세한 내용은 재단의 문서를 참조하십시오.

프로젝트에서 Panini 템플릿의 폴더 구조를 살펴 보겠습니다. 폴더를 열어야합니다. 여기에는 데이터, 레이아웃, 페이지 및 부분이 있습니다. 예상대로, 레이아웃 폴더에서 우리는 메인 레이아웃 스캐 폴딩을 쓸 수 있습니다. 여기서는 모든 페이지에서 반복 될 헤더와 바닥 글을 정의 할 수 있습니다.

하나의 레이아웃 만 사용하려면 의 이름을 지정하십시오. 우리 프로젝트에서 그러한 데모 파일을 찾을 수 있습니다. 여러 레이아웃을 사용하려면 특수 바디 태그 ( 예 참조)로 더 많은 파일을 만들 수 있으며 페이지에서 특수 태그를 사용하여 컴파일러에 사용해야하는 레이아웃을 알려야합니다. 이것을 아래 그림과 같이 앞면 물질이라고합니다

이 마크는 페이지 파일 내용의 상단에 배치해야합니다. 이 레이아웃을 사용하는 페이지에만 적용되며 다른 모든 페이지는 기본 레이아웃을 사용합니다. src 페이지 폴더를 살펴 보겠습니다. 이 폴더에는 컨텐츠 데모 페이지 인 파일이 있습니다. 보시다시피 HTML 또는 바디 태그가 없습니다. 이전에 논의 된

레이아웃에 주입되기 때문입니다. 물론 비슷한 페이지를 추가 할 수 있지만 일부 페이지는 다른 레이아웃을 사용할 수 있습니다.

작고 재사용 가능한 HTML 요소를 원한다면 부분 폴더에서 만들 수 있습니다. 데모 프로젝트에는 파일이 없지만 매우 간단합니다. HTML 스 니펫으로 파일을 만들고 파일의 이름을 지정하십시오. 그런 다음 레이아웃 파일이나 페이지 파일에서 와 같은 것을 사용 하여이 섹션을 가져올 수 있습니다 (파일 확장자가 없음). 그게 다야. 모든 컨텐츠는 default.html 폴더로 연결, 컴파일 및 복사됩니다. {{> body}} 데이터라는 폴더도 있습니다. 여기에서 .json 또는 .yml 파일 형식의 일부 데이터를 제공 할 수 있습니다. 예를 들어, 데이터 폴더에 다음 내용이있는 데이터 폴더에 파일이 있다고 가정합니다. default.html 레이아웃 페이지 또는 HTML 파일의 일부에서 다음과 같은 것을 사용할 수 있습니다.

이를 통해 JSON 데이터를 반복하고 일부 HTML을 생성 할 수 있습니다. 배열에 이름이있는 항목 목록을 가져와야합니다.

$ npm install --global gulp bower

보시다시피, Panini는 복잡한 HTML 구조를 만들고 싶고 스스로 반복하고 싶지 않을 때 매우 유용한 도구입니다.

BrowserSync : 브라우저 테스트 동기화 및 실시간 다시로드 내가 논의한 Foundation CLI 도구의 마지막 사전 구성된 기능은 BrowserSync입니다. 아시다시피 많은 장치와 많은 해상도에서 웹 사이트를 테스트해야하기 때문에 프론트 엔드 작업은 어렵습니다. 이제 많은 다른 장치가 귀하의 웹 사이트에 연결되는 큰 테이블이 있다고 상상해보십시오. 무언가를 클릭하거나 페이지를 스크롤하면 모든 장치가 동일하게 수행됩니다. 실시간으로 수정해야 할 사항과 잘 작동하지 않는 것이 실시간으로 볼 수 있기 때문에 좋습니다.

우리가 만든 프로젝트는 자동으로 외부 IP 주소를 제공합니다 (위 참조). 가져 와서 모든 다른 장치의 브라우저에 붙여 넣어 동일한 BrowserSync 엔진에 연결하고 테스트를 시작할 수 있습니다.

Browsersync는 실시간 변경 사항을 제공하므로 무언가를 저장하면 페이지를 수동으로 새로 고치지 않고 브라우저 창에 나타납니다. 또한 모든 연결된 장치에 나타나며 Foundation-CLI 및 Zurb 템플릿과 함께 추가 작업없이 이러한 기능을 모두 무료로 얻을 수 있습니다. 이것이 얼마나 훌륭합니까?

결론 나는 개인적으로 Zurb Foundation 팀이 개발자에게 강력한 도구와 스캐 폴딩을 제공하는 데 큰 도움이되었다고 생각합니다. 이것은 또한 중요합니다. 바로 사용할 준비가 된 일부 플러그인 및 CSS 스타일 이상. 사이트 6에 기초를 사용하는 것은 훌륭한 경험이었습니다. Foundation CLI 도구를 사용하여 얼마나 많은 백엔드 프로그래밍 작업을 수행 할 수 있는지 상상해보십시오. 정적 웹 사이트와 블로그를 만들 수 있으며 상당히 발전 할 수도 있습니다. 말할 것도없이, 대부분의 경우 정적 블로그와 웹 사이트가 훨씬 빠르고 더 좋습니다.

파니니를 자세히 살펴 보는 것이 좋습니다. NPM 패키지 readme에서 일부 문서를 찾을 수도 있습니다. Markdown 컴파일 또는 커스텀 비서와 같이 여기서 설명하지 않는 많은 강력한 기능을 수행 할 수 있습니다. 또한 Gulp에 대해 읽고 Foundation-CLI 도구에서 생성 한 Zurb 템플릿/프로젝트에 사용 된 모든 Gulp 작업을 신중하게 볼 수 있습니다.

한 가지 더 - 압축 된 CSS 및 JavaScript 파일을 언급하지 않았습니다. 명령을 사용하는 경우 를 실행하십시오. Foundation 명령에 대해 자세히 알아 보려면

명령을 실행하십시오. 프로젝트에서 종속성을 업데이트 해야하는 경우 를 실행할 수 있습니다. 대체로, 나는 당신이 여기서 무언가를 배웠기를 바랍니다. 궁금한 점이 있으시면 의견에 알려 주거나 저에게 연락 할 수있는 다양한 방법은 내 프로필을 확인하십시오.

Foundation 6 CLI 도구 FAQS (FAQS) Foundation 6의 CLI 도구를 사용하기위한 전제 조건은 무엇입니까?

Foundation 6의 CLI 도구를 사용하려면 시스템에 node.js (0.12 이상)와 git을 설치해야합니다. node.js는 명령 줄 인터페이스를 실행하는 데 필요한 JavaScript 런타임입니다. GIT는 소프트웨어 개발 중에 소스 코드의 변경 사항을 추적하는 버전 제어 시스템입니다. 이 설치가없는 경우 공식 웹 사이트에서 Node.js를 다운로드하고 공식 웹 사이트에서 Git을 다운로드 할 수 있습니다. 설치가 완료되면 Foundation 6의 CLI 도구를 사용하여 시작할 수 있습니다.

Foundation 6의 CLI 도구를 설치하는 방법은 무엇입니까?

Foundation 6 용 CLI 도구 설치는 간단합니다. 터미널 또는 명령 프롬프트를 열고 다음 명령을 입력하십시오. 이 명령은 NPM (Node Package Manager)에게 Foundation CLI를 전 세계적으로 다운로드하여 컴퓨터의 모든 디렉토리에서 사용할 수 있도록 설치하도록 지시합니다. 설치가 완료되면 터미널에서

를 입력하여 확인할 수 있습니다. 이것은 시스템에 설치된 Foundation CLI의 버전을 보여 주어야합니다.

Foundation 6의 CLI 도구를 사용하여 새 프로젝트를 만드는 방법은 무엇입니까?

Foundation 6의 CLI 도구를 사용하여 새 프로젝트를 만들려면 터미널을 열고 프로젝트를 만들려면 디렉토리로 이동하십시오. 그런 다음 다음 명령을 입력하십시오. 따라서 프로젝트의 템플릿을 선택하라는 메시지가 표시됩니다. 기본 템플릿, 고급 템플릿 또는 사용자 정의 템플릿 중에서 선택할 수 있습니다. 템플릿을 선택한 후 CLI는 프로젝트의 텍스트를 사용합니다. 새 디렉토리를 만들고 필요한 모든 종속성을 설치하십시오.

Foundation 6의 CLI 도구에서 사용할 수있는 다른 명령은 무엇입니까?

Foundation 6의 CLI 도구는 프로젝트를 관리하는 데 도움이되는 몇 가지 명령을 제공합니다. 가장 일반적으로 사용되는 명령 중 일부는 다음과 같습니다. (새 프로젝트 생성),

(서버 시작 및 파일 변경 모니터), (파일을 생산에 사용할 수있는 프로젝트로 컴파일), 그리고 (프로젝트를 바꾸면 의존성을 최신 버전으로 업데이트합니다). npm install foundation-cli --global Foundation 6의 CLI 도구를 업데이트하는 방법은 무엇입니까? foundation -v Foundation 6의 CLI 도구를 업데이트하려면

명령을 사용할 수 있습니다. 터미널을 열고 다음 명령을 입력하십시오. 이 명령은 NPM에 Foundation-CLI 글로벌 패키지에 대한 업데이트를 확인하고 가능한 경우 설치하도록 지시합니다.

재단 6의 CLI 도구를 제거하는 방법은 무엇입니까?

Foundation 6의 CLI 도구를 제거 해야하는 경우

명령을 사용할 수 있습니다. 터미널을 열고 다음 명령을 입력하십시오. 이 명령은 NPM에 시스템에서 Foundation-CLI 글로벌 패키지를 삭제하도록 지시합니다. foundation new 여러 프로젝트에서 Foundation 6의 CLI 도구를 사용할 수 있습니까?

예, 여러 프로젝트에서 Foundation 6의 CLI 도구를 사용할 수 있습니다. CLI는 시스템에 전 세계적으로 설치되므로 모든 디렉토리에서 사용할 수 있습니다. 새 프로젝트를 만들려면 원하는 디렉토리로 이동하여

명령을 사용하십시오.

Foundation 6의 CLI 도구에서 기본 템플릿과 고급 템플릿의 차이점은 무엇입니까? foundation new Foundation 6의 CLI 도구의 기본 템플릿은 프로젝트의 간단한 출발점을 제공하므로 최소한의 설정 만 필요합니다. 반면에 고급 템플릿에는보다 복잡한 프로젝트를위한 추가 도구 및 구성이 포함되어 있습니다. 여기에는 SASS 컴파일러, 자동 접두사, JavaScript 커넥터 및 소스 맵 생성기가 포함됩니다.

Foundation 6의 CLI 도구를 사용하여 생산 프로젝트를 컴파일하는 방법은 무엇입니까?

생산 프로젝트를 컴파일하려면 명령을 사용하십시오. 이 명령은 SASS 및 JavaScript 파일을 컴파일하고 CSS 및 JavaScript를 압축하며 이미지를 압축하며 HTML 파일을 Dist 폴더에 복사합니다. 이 폴더에는 프로젝트 제작에 사용할 수있는 모든 파일이 포함되어 있습니다.

Foundation 6에서 CLI 도구의 문제를 해결하는 방법은 무엇입니까?

Foundation 6의 CLI 도구를 사용하는 데 문제가있는 경우 문제 해결을 위해 수행 할 수있는 몇 가지 단계가 있습니다. 먼저, 최신 버전의 node.js 및 git이 시스템에 설치되어 있는지 확인하십시오. 문제가 지속되면

명령으로 CLI를 업데이트해보십시오. 여전히 문제가있는 경우 공식 포럼이나 Github 페이지에서 재단 커뮤니티에서 도움을받을 수 있습니다.

위 내용은 Foundation 6의 CLI 도구를 시작합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!