的事情）。 實現(xiàn)類似的事情最終變得非常容易：我們在任何提交之前設(shè)置了a

git掛鉤，以在libsass和ruby sass中進行測試。如果測試失敗，我們會殺死該過程。

有不同的方法來運行Sass和Libsass。您可以使用二進製文件，也可以使用包裝紙。在我們的情況下，我們選擇了一個很小的散裝工作流程，使我們很容易運行Ruby Sass和Libsass。

如果我們總結(jié)一下，那就這樣：

1. 一個預(yù)先承諾的鉤子在提交上運行一個測試GULP任務(wù)
測試GULP任務(wù)在libsass和Ruby Sass
2. 中編譯了SASS測試
如果測試失敗，則SASS會引發(fā)@Error
3. >的錯誤
SASS錯誤被Gulp捕獲，該錯誤本身會發(fā)出錯誤
灣錯誤被刪除提交

架構(gòu)>單詞使它聽起來很大，而它實際上非常簡單。這是該項目的外觀：

<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>

dist/
<span>|
</span><span>|- my-sass-library.scss
</span><span>|
</span>tests/
<span>|
</span><span>|- helpers/
</span><span>|   |- _SassyTester.scss
</span><span>|   |- _custom-formatter.scss
</span><span>|
</span><span>|- function-1.scss
</span><span>|- function-2.scss
</span><span>|- ...</span>

>中

<span>// Import the library to test (or only the function if you can)
</span><span><span>@import '../dist/my-sass-library';</span>
</span>
<span>// Import the tester
</span><span><span>@import 'helpers/SassyTester';</span>
</span>
<span>// Import the custom formatter
</span><span><span>@import 'helpers/custom-formatter';</span>
</span>
<span>// Write the tests
</span><span>// See my previous article to know more about this:
</span><span>// http://...
</span><span><span>$tests-function-1: ( ... );</span>
</span>
<span>// Run the tests
</span><span><span>@include run(test('function-1', $tests-function-1));</span></span>

Gulp Workflow

如果您想簡要介紹Gulp，請務(wù)必閱讀我最近的文章：Sass的簡單笨拙的工作流程。對於本節(jié)，我假設(shè)您熟悉Gulp。

一個可以在測試文件夾上運行l(wèi)ibsass（使用Gulp-sass）

• 一個運行兩個任務(wù)
的一個
理想情況下，當Sass引發(fā)錯誤時（由於內(nèi)置錯誤或@Error）時，Gulp應(yīng)該正確退出。不幸的是，關(guān)於Ruby Sass的Gulp-Ruby-sass存在一個問題，因此對於Ruby Sass，我們必須提出一個node und offfick fastuard faturoght fatal例外process.exit（1）我們自己。 >

<span>// We overwrite the `run(..)` mixin from SassyTester to make it throw
</span><span>// an `@error` only if a test fails. The only argument needed by the
</span><span>// `run(..)` mixin is the return of `test(..)` function from SassyTester.
</span><span>// You can check what `$data` looks like in SassyTester documentation:
</span><span>// http://kittygiraudel.com/SassyTester/#function-test
</span><span><span>@mixin run($data) {</span>
</span><span>  <span>$tests: map-get($data, 'tests');</span>
</span>
<span>  <span>@each $test in $tests {</span>
</span><span>    <span>@if map-get($test, 'fail') {</span>
</span><span>      <span>@error 'Failing test!</span>
</span><span>        <span>Expected : #{map-get($test, 'expected')}</span>
</span><span>        <span>Actual   : #{map-get($test, 'actual')}';</span>
</span>    <span>}
</span>  <span>}
</span><span>}</span>

>有大量的庫可以設(shè)置前簽名的掛鉤。我個人喜歡預(yù)先提交的，但您基本上可以選擇自己喜歡的東西，因為它們都做或多或少。 > >要在我們的項目中添加預(yù)訂掛鉤，我們需要在包裝中創(chuàng)建一個預(yù)命令密鑰。該鍵映射到命令的數(shù)組。因此，我們還需要一個腳本對象，並帶有一個名為“測試”的密鑰，映射到Gulp命令：Gulp Test。

就是這樣，我們已經(jīng)完成了。

最終想法 如您所見，此示例非常簡單，但是它可以完成工作，並且做得很好。這是它的外觀：

<span>var gulp = require('gulp');
</span><span>var sass = require('gulp-sass');
</span><span>var rubySass = require('gulp-ruby-sass');
</span>
<span>// Run LibSass on the tests folder
</span><span>// Gulp automatically exits process in case of Sass error
</span>gulp<span>.task('test:libsass', function () {
</span>  <span>return gulp.src('./tests/*.scss')
</span>    <span>.pipe(plugins.sass());
</span><span>});
</span>
<span>// Run Ruby Sass on the tests folder
</span><span>// Gulp manually exits process in case of Sass error
</span>gulp<span>.task('test:ruby-sass', function () {
</span>  <span>return rubySass('./tests')
</span>    <span>.on('error', function (err) {
</span>      process<span>.exit(1);
</span>    <span>});
</span><span>});
</span>
gulp<span>.task('test', ['test:libsass', 'test:ruby-sass']);</span>

>你怎麼看？您可能會考慮將其添加到您的庫或框架中嗎？