Verifikasi Kesetaraan CSS

grunt build tidak berhenti setelah CSS selesai dibuat. Pipeline yang sama menurunkan versi SCSS dan SASS dari satu berkas Less, mengompilasi ketiganya, lalu membandingkan hasil minifikasi ketiganya sebelum direktori uji dihapus. Perbandingan itu dijalankan task execute:test, langkah kesepuluh dari sebelas langkah di build (Gruntfile.js:193-205¹). Urutan penuh pipeline ada di Pipeline Build Grunt, sedangkan sintaksis ketiga dialek dijelaskan di Sistem Gaya Less, SCSS, dan SASS.

Masukan dan keluaran setiap langkah verifikasi

Seluruh berkas uji ditulis ke direktori tests/, yang tidak disimpan di repository (.gitignore:37-38).

Target sass:test memakai cwd: 'src' dengan ext: '.css', sehingga nama subdirektori ikut terbawa: src/sass/waves.sass menjadi tests/sass/waves.css dan src/scss/waves.scss menjadi tests/scss/waves.css (Gruntfile.js:101-111⁴). Perbandingan tidak bekerja pada CSS mentah, melainkan pada hasil minifikasi: cssmin membaca tests/less/waves.css, tests/sass/waves.css, dan tests/scss/waves.css lalu menulis berkas waves.min.css di sebelah masing-masing (Gruntfile.js:19-31⁶).

sequenceDiagram
    participant Build as grunt build
    participant L2S as execute less2scss
    participant S2S as sass-convert
    participant SASST as sass test
    participant LESST as less test
    participant MIN as cssmin
    participant TEST as execute test
    participant CLEAN as clean test
    Build->>L2S: src/less/waves.less to src/scss/waves.scss
    Build->>S2S: src/scss to src/sass
    Build->>SASST: compile .sass and .scss to tests
    Build->>LESST: compile waves.less to tests/less/waves.css
    Build->>MIN: waves.css to waves.min.css
    Build->>TEST: read three waves.min.css files
    TEST-->>Build: PASS conversions generated same CSS
    TEST-->>Build: ERROR sass failed test
    Build->>CLEAN: delete tests/*
%% fig: Urutan verifikasi di dalam grunt build
%% desc: Build menyiapkan tiga jalur CSS, meminifikasinya, lalu execute:test membandingkan ketiganya sebelum clean:test menghapus direktori uji.

Empat penulisan ulang di execute:less2scss

Jembatan dari Less ke SCSS bukan transpiler penuh. Task execute:less2scss membaca src/less/waves.less sebagai teks, menjalankan empat penggantian regex berurutan, lalu menulis hasilnya ke src/scss/waves.scss (Gruntfile.js:132-151⁹).

graph LR
  LESS["src/less/waves.less"] --> R1["replace @prefix to $"]
  R1 --> R2["rewrite mixin declaration"]
  R2 --> R3["rewrite include call"]
  R3 --> R4["rewrite string literal"]
  R4 --> SCSS["src/scss/waves.scss"]
  style LESS fill:#336791,color:#fff
  style R1 fill:#f59e0b,color:#000
  style R2 fill:#f59e0b,color:#000
  style R3 fill:#f59e0b,color:#000
  style R4 fill:#f59e0b,color:#000
  style SCSS fill:#8b5cf6,color:#fff
%% fig: Rantai penggantian teks di execute:less2scss
%% desc: Berkas Less dibaca sebagai teks, empat regex menulis ulang sintaksisnya, lalu hasilnya disimpan sebagai src/scss/waves.scss.

Keempat pola itu tercatat pada Gruntfile.js:137-144¹⁰. Hasilnya terlihat langsung pada berkas turunan: definisi mixin Less menjadi @mixin waves-transition($transition) di src/scss/waves.scss (src/scss/waves.scss:9-14¹¹), lalu sass-convert mengubahnya lagi menjadi =waves-transition($transition) dengan indentasi dua spasi di src/sass/waves.sass (src/sass/waves.sass:9-13¹²). Opsi from: 'scss', to: 'sass', dan indent: 2 untuk konversi itu ditetapkan di konfigurasi sass-convert (Gruntfile.js:88-99¹³).

⚠️ Task ini menghapus awalan @ pada semua aturan yang tidak masuk daftar pengecualian. Karena itu komentar sumber menyatakan bahwa transpilasi Less ke SCSS yang sebenarnya masih membutuhkan penggantian spin menjadi adjust-hue (Gruntfile.js:146¹⁴). Kesetaraan yang diuji execute:test karena itu hanya sah untuk isi src/less/waves.less saat ini, bukan untuk Less pada umumnya.

Tiga pasang perbandingan

execute:test membaca ketiga berkas hasil minifikasi sebagai teks utf8 (Gruntfile.js:155-157¹⁵), lalu membandingkannya dengan operator !=. Setiap pasangan yang tidak identik menyetel failure = true (Gruntfile.js:159-175¹⁶).

Bila tidak ada satu pun pasangan yang berbeda, task mencetak PASS: conversions generated same CSS (Gruntfile.js:175¹⁷).

Yang tidak dijamin oleh execute:test

⚠️ Pesan kegagalan hanya ditulis lewat grunt.log.writeln, dan task diakhiri dengan done() tanpa memanggil grunt.fail (Gruntfile.js:159-177¹⁸). build karena itu tetap berlanjut ke clean:test, yang menghapus tests/* beserta seluruh bukti perbandingan (Gruntfile.js:113-115⁸). Kegagalan kesetaraan CSS hanya terlihat sebagai baris ERROR di log, tidak sebagai build yang berhenti.

⚠️ Pasangan SASS dan SCSS diperlakukan sama ketatnya dengan pasangan lain meskipun pesannya memakai awalan WARNING; nilainya tetap menyetel failure = true (Gruntfile.js:159-175¹⁶). Jangan membaca awalan itu sebagai kegagalan yang boleh diabaikan.

⚠️ Task execute:test didaftarkan dengan deskripsi 'Convert less to scss.', deskripsi yang sama dengan execute:less2scss, sehingga keluaran grunt --help menyesatkan tentang fungsi task ini (Gruntfile.js:153-178⁷).

Karena tests/ diabaikan git (.gitignore:37-38), hasil verifikasi tidak pernah ikut ter-commit. Setiap pemeriksaan harus dijalankan ulang lewat grunt build; lihat Artefak Distribusi untuk berkas yang tetap disimpan setelah clean:test berjalan.