SASS 라이브러리 테스트

최근에, 나는 include-media에서 Eduardo Bouças와 함께 일하면서 괜찮은 시간을 보냈습니다. 우리는 많은 리팩토링을 겪었으므로 약간의 테스트를 작성하고 우리가 아무것도 깨지지 않도록 모든 커밋에 실행하기로 결정했습니다. 이 기사의 세부 사항을 살펴 보겠습니다.

아직 미디어 포함을 모른다면 Sass의 매우 가벼우면서도 강력한 중단 점 관리자입니다.

제공된 공개 API는 단일 믹스 인 Media (..) (따라서 라이브러리의 이름)이지만 모든 것이 충분히 잘 생각되어 실제로는 놀라운 일을 할 수 있습니다. 시작하기 전 짧은 예 :

이제 꽤 rad입니다. 그렇지 않습니까? <p> <we> 어쨌든, 우리는 여러분들과 공유하고 싶은 작은 테스트 시스템을 생각해 냈습니다. 물론, 전체 프레임 워크를 테스트하려면 Sass에 대해 Sass로 작성된 완전한 테스트 프레임 워크 인 Eric Suzanne에서 True를 사용하고 싶을 수도 있습니다. Sass에 대한 최근 기사에서 David가 소개하고 설명했습니다. </we></p> <idea> 아이디어는 무엇입니까? <run> 우리는 저장소에 전념 할 때마다 도서관에서 주요 개인 기능에 대해 몇 가지 테스트를 실행하고 싶었습니다. 테스트가 실패하면 커밋이 중단되고 커밋이 통과 할 수 있도록 코드를 수정해야합니다. 이런 식으로, 우리는 도서관을 깨뜨릴 위험없이 안전하게 작업 할 수 있는지 확인합니다 (일반적으로 <p> 나쁜 </p> <something> 이와 같은 것을 달성하는 것은 놀랍게도 쉬워졌습니다. 테스트가 실패하면 프로세스를 죽입니다. <pre class="brush:php;toolbar:false"><span>.my-component { </span><span> <span>width: 100%;</span> </span> <span>// On screens larger or equal to *small* breakpoint, </span> <span>// make the component floated and half the size </span><span> <span>@include media('≥small') {</span> </span><span> <span>float: left;</span> </span><span> <span>width: 50%;</span> </span> <span>} </span><span>}</span>

로그인 후 복사

Sass와 Libsass를 실행하는 방법에는 여러 가지가 있습니다. 바이너리가 있거나 래퍼를 사용할 수 있습니다. 우리의 경우, 우리는 작은 Gulp 워크 플로를 선택하여 Ruby Sass와 Libsass를 쉽게 실행할 수있었습니다. 우리는 매우 간단한 것을 원했기 때문에 Sassytester를 사용하여 Sass로 테스트를 작성했으며, 최근 5 분 안에 Sass 기능을 테스트하는 기사에서 소개했습니다. Sassytester의 길이는 약 25 줄입니다. 테스트 기능은 테스트 결과와 함께 SASS 맵 만 출력합니다. 거기에서 우리는 우리가 원하는 것을 할 수 있습니다. 우리의 경우 테스트가 실패하면 오류를 던지려고합니다. 그렇게하려면 Sass의 @error 지시문이 있습니다!

SASS 테스트를 컴파일 할 때 Gulp 작업이 Sass 오류에 직면하면 오류 자체를 던지면서 프로세스를 종료하여 사전 커밋 후크까지 거품을 일으켜 커밋을 중단합니다. 우리가 이것을 요약하면, 그것은 다음과 같이 간다 :

사전 커밋 후크는 커밋에서 테스트 걸프 작업을 실행합니다.

테스트 걸프 작업은 libsass와 Ruby Sass 테스트가 실패하면 Sass는 @error 에 오류를 던집니다. Sass 오류는 gulp에 의해 잡히면 오류가 발생합니다 gulp 오류는 커밋을 중단하는 사전 커밋 후크에 의해 잡혔습니다.

1. 지금까지, 너무 좋아?
테스트 아키텍처 설정
2. 아키텍처 단어는 실제로 매우 단순하지만 매우 크게 들립니다. 프로젝트의 모습은 다음과 같습니다.
3. 결국 그렇게 인상적이지 않습니까? GULP 작업은 단순히 테스트 폴더의 모든 파일에서 SASS 엔진을 실행합니다. 기능 1.scss는 다음과 같습니다
마지막으로, Sassytester의 원본은 모두 통과 여부에 관계없이 테스트 결과를 @error로 출력하기 때문에 런 (..)을 재정의해야합니다. 우리의 경우, 우리는 오류가있는 경우에만 던지기를 원합니다. 헬퍼/_output-formatter.scss
4. 더 고급 버전의 동등한 실행 (..) Mixin 버전의 경우 include-media에서 하나를 확인하십시오. gulp 워크 플로우 Gulp에 대한 짧은 소개를 원한다면 최근 기사를 읽으십시오. Sass를위한 간단한 Gulpy Workflow. 이 섹션에서는 Gulp에 익숙하다고 가정합니다 우리는 세 가지 작업이 필요합니다
5. 테스트 폴더에서 libSass를 실행하는 사람 (Gulp-sass 사용) 테스트 폴더에서 Ruby Sass를 실행하는 사람 (Gulp-ruby-sass 사용)

하나의 이전 작업 를 실행합니다

이상적으로, Sass가 오류를 던지면 (내장 오류로 인해 또는 @error로 인해) Gulp는 올바르게 종료해야합니다. 불행히도, 루비 사스의 경우 아직 고정되지 않은 Gulp-Ruby-Sass에 문제가 있습니다. 우리는 uppher 치명적인 예외

를 프로세스를 제압해야합니다 .exit (1) 우리 자신. >

 사전 커밋 후크 추가 
<ons> 사전 커밋 후크를 설정하는 수많은 라이브러리가 있습니다. 나는 개인적으로 사전 커밋을 좋아하지만 당신은 기본적으로 그들이 좋아하는 것을 선택할 수 있습니다.
<pre class="brush:php;toolbar:false"> 프로젝트에 사전 커밋 후크를 추가하려면 Package.json에서 사전 커밋 키를 만들어야합니다. 이 키는  npm 스크립트  명령 배열에 매핑됩니다. 따라서, 우리는 또한 Gulp 명령에 매핑 된 키라는 키와 함께 스크립트 객체가 필요합니다.
<p>
 커미션 프리 커밋 후크가 발사되어 테스트 NPM 스크립트를 실행하려고합니다. 이 스크립트는 다음 명령을 실행합니다. Gulp Test는 Gulp가 테스트를 실행하도록 강조합니다.
 그게 다야, 우리는 끝났어
<em> 최종 생각 
<extremely>이 예는 볼 수 있듯이 매우 단순하지만 작업을 수행하고 잘 수행합니다. 다음은 다음과 같습니다. </extremely></em>
</p>  <pre class="brush:php;toolbar:false"><span>.my-component {
</span><span>  <span>width: 100%;</span>
</span>
  <span>// On screens larger or equal to *small* breakpoint,
</span>  <span>// make the component floated and half the size
</span><span>  <span>@include media('≥small') {</span>
</span><span>    <span>float: left;</span>
</span><span>    <span>width: 50%;</span>
</span>  <span>}
</span><span>}</span>

그래서 당신은 어떻게 생각하십니까? 라이브러리 또는 프레임 워크에 추가하는 것이 무엇입니까?

위 내용은 SASS 라이브러리 테스트의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!