Artefak Distribusi

dist/ bukan tempat menulis kode. Seluruh isinya dibangkitkan oleh task build yang merangkai less:build, jshint, uglify, copy, dan cssmin (Gruntfile.js:193-205¹), lalu berkas di sana dipakai langsung oleh pemakai pustaka. Direktori ini memuat empat artefak siap pakai ditambah satu source map: waves.js, waves.min.js, waves.css, waves.min.css, dan waves.min.js.map.

graph TD
  LESS["src/less/waves.less"]
  JS["src/js/waves.js"]
  TYPES["src/typings/waves.d.ts"]
  T_LESS["less:build"]
  T_COPY["copy:js"]
  T_UGLIFY["uglify:js"]
  T_CSSMIN["cssmin:target"]
  DIST_CSS["dist/waves.css"]
  DIST_MINCSS["dist/waves.min.css"]
  DIST_JS["dist/waves.js"]
  DIST_MINJS["dist/waves.min.js"]
  DIST_MAP["dist/waves.min.js.map"]
  NPM["package.json main dan types"]
  BOWER["bower.json main"]
  DOCS["docs/static"]

  LESS --> T_LESS
  T_LESS --> DIST_CSS
  DIST_CSS --> T_CSSMIN
  T_CSSMIN --> DIST_MINCSS
  JS --> T_COPY
  T_COPY --> DIST_JS
  JS --> T_UGLIFY
  T_UGLIFY --> DIST_MINJS
  T_UGLIFY --> DIST_MAP
  DIST_MINCSS -.-> DOCS
  DIST_MINJS -.-> DOCS
  JS -.-> NPM
  TYPES -.-> NPM
  DIST_JS --> BOWER
  DIST_CSS --> BOWER
  style LESS fill:#336791,color:#fff
  style JS fill:#336791,color:#fff
  style TYPES fill:#336791,color:#fff
  style T_LESS fill:#f59e0b,color:#000
  style T_COPY fill:#f59e0b,color:#000
  style T_UGLIFY fill:#f59e0b,color:#000
  style T_CSSMIN fill:#f59e0b,color:#000
  style DIST_CSS fill:#2d7d46,color:#fff
  style DIST_MINCSS fill:#2d7d46,color:#fff
  style DIST_JS fill:#2d7d46,color:#fff
  style DIST_MINJS fill:#2d7d46,color:#fff
  style DIST_MAP fill:#8b5cf6,color:#fff
  style NPM fill:#f59e0b,color:#000
  style BOWER fill:#f59e0b,color:#000
  style DOCS fill:#8b5cf6,color:#fff
%% fig: Alur source menjadi artefak distribusi
%% desc: Source di src/ melewati target less:build, copy:js, uglify:js, dan cssmin:target, lalu berakhir sebagai berkas di dist/ yang dirujuk package.json, bower.json, dan docs/static.

Isi direktori dist

Lima berkas di dist/ berasal dari dua sumber saja: src/js/waves.js dan src/less/waves.less. Nama target Grunt di tabel berikut adalah target yang benar-benar menulis berkas tersebut.

copy:js tidak melakukan transformasi apa pun, hanya menyalin src/js/waves.js ke dist/ (Gruntfile.js:73-79²). Karena itu dist/waves.js memuat banner versi dan pembungkus UMD yang sama dengan sumbernya (dist/waves.js:1-8⁷), dan berkasnya ditutup oleh return Waves; di dalam factory (dist/waves.js:599-600⁸).

Jalur CSS berbeda: less:build mengompilasi src/less/waves.less menjadi dist/waves.css (Gruntfile.js:6-17⁵), sehingga banner Less ikut menjadi komentar di keluaran CSS (dist/waves.css:1-8⁹). Berkas ini kemudian dipampatkan oleh cssmin:target, yang juga menjadi sumber pemampatan untuk tests/less, tests/sass, dan tests/scss (Gruntfile.js:19-31⁶). Banner /*! ... */ tetap dipertahankan pada hasil minifikasi CSS (dist/waves.min.css:1-7¹⁰).

Untuk JavaScript, uglify:js membaca src/js/waves.js dan menulis dist/waves.min.js dengan mangle: true serta drop_console: true (Gruntfile.js:48-70³). Hasilnya berupa satu baris yang langsung dimulai dengan IIFE UMD, tanpa banner versi (dist/waves.min.js:1¹¹), dan diakhiri komentar penunjuk source map (dist/waves.min.js:2¹²). Berkas map-nya menyatakan "file":"waves.min.js" dan "sources":["../src/js/waves.js"] (dist/waves.min.js.map:1¹³).

Field manifest yang menunjuk artefak

Kedua manifest memakai artefak yang berbeda, dan perbedaan itu menentukan apa yang diterima pemakai.

package.json tidak memuat field files dan repository ini tidak punya .npmignore, jadi seluruh isi repository ikut masuk paket npm (package.json:1-33¹⁸). Entry point npm tetap src/js/waves.js, sehingga memilih berkas dist/ adalah keputusan pemasangan di sisi pemakai, bukan sesuatu yang dipaksakan manifest.

⚠️ Mengubah berkas di dist/ secara manual akan hilang pada grunt build berikutnya. watch menjalankan ulang task build setiap kali berkas src/**/*.js atau src/**/*.less berubah (Gruntfile.js:117-129¹⁹), dan clean:test hanya membersihkan tests/* sehingga artefak lama di dist/ tidak pernah terhapus otomatis (Gruntfile.js:113-115²⁰).

Artefak turunan untuk situs

Selain untuk pemakai pustaka, dua artefak terkompresi disalin ke docs/static oleh copy:docs, yang mengambil waves.min.css dan waves.min.js dari dist/ (Gruntfile.js:80-85²¹). Alur penyajiannya dibahas di Situs Dokumentasi dengan Situs. Rincian urutan target dan verifikasi kesetaraan antar format ada di Pipeline Build Grunt dan Verifikasi Kesetaraan CSS, sedangkan isi deklarasi types dijelaskan di API Publik dan Tipings TypeScript.