1. commit前のフックは、コミットでテストのgulpタスクを?qū)g行します
2. テストのガルプタスクは、libsassとruby sassの両方でサステストをコンパイルします
3. テストが失敗した場合、sassは@error
でエラーをスローします
4. サスエラーはガルプによってキャッチされます。
gulpエラーは、コミットを中止する事前コミットフックによってキャッチされます

アーキテクチャ単語は、実際には非常にシンプルですが、非常に大きく聞こえます。プロジェクトがどのように見えるかは次のとおりです

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

gulpワークフロー

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

3つのタスクが必要です

テストフォルダーでlibsassを?qū)g行する1つ（gulp-sassを使用）

テストフォルダーでRuby Sassを?qū)g行する1つ（Gulp-Ruby-Sassを使用）

1つは、2つの前のタスクを?qū)g行します

理想的には、SASSがエラーをスローする場合（エラーが組み込まれているため、または@errorのため）、Gulpは適切に終了する必要があります。殘念ながら、まだ修正されていないGulp-Ruby-Sassでこれについて問題があります。Ruby Sassの場合、Process.Exit（1）自分自身を使用してノード
• exitを使用する必要があります。 >
事前にコミットフックを追加
事前にコミットのフックをセットアップするライブラリがたくさんあります。私は個人的には事前に好きですが、基本的にあなたは好きなものを選択することができます。

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

コマンドの配列にマッピングされます。したがって、gulpコマンドにマッピングされたテストという名前のキーを備えたスクリプトオブジェクトも必要です：gulpテスト。 コミットする際には、コミット前のフックが発射され、テストNPMスクリプトを?qū)g行しようとします。このスクリプトは、次のコマンドを?qū)g行します：Gulp Testは、テストを?qū)g行するためにGulpを推測します。

それで、あなたはどう思いますか？これはあなたがあなたのライブラリやフレームワークに追加することを検討するかもしれないものですか？