Cara Memanfaatkan Mesin: Menjadi Produktif Dengan Pelari Tugas

Pelari tugas adalah pahlawan (atau penjahat, tergantung sudut pandang Anda) yang diam-diam bekerja keras di balik sebagian besar aplikasi web dan seluler. Pelari tugas memberikan nilai melalui otomatisasi berbagai tugas pengembangan seperti menggabungkan file, memutar server pengembangan, dan menyusun kode. Pada artikel ini, kita akan membahas skrip Grunt, Gulp, Webpack dan npm. Kami juga akan memberikan beberapa contoh masing-masing untuk membantu Anda memulai. Menjelang akhir, saya akan memberikan beberapa kemenangan mudah dan tip untuk mengintegrasikan ide dari posting ini ke dalam aplikasi Anda.

Ada sentimen bahwa pelari tugas, dan kemajuan JavaScript secara umum, terlalu memperumit lanskap front-end. Saya setuju bahwa menghabiskan sepanjang hari mengutak-atik skrip build tidak selalu merupakan penggunaan waktu Anda yang terbaik, tetapi pelari tugas memiliki beberapa manfaat bila digunakan dengan benar dan dalam jumlah sedang. Itulah tujuan kami dalam artikel ini, untuk dengan cepat membahas dasar-dasar pelari tugas paling populer dan memberikan contoh yang solid untuk memulai imajinasi Anda tentang bagaimana alat ini dapat masuk ke dalam alur kerja Anda.

Bacaan Lebih Lanjut tentang SmashingMag:

• Menjadi Pengguna Kuat Baris Perintah Dengan Oh-My-ZSH Dan Z
• Pengantar PostCSS
• Bangun Dan Berlari Dengan Grunt
• Membangun Dengan Gulp

Catatan di Baris Perintah

Pelari tugas dan alat pembangunan pada dasarnya adalah alat baris perintah. Sepanjang artikel ini, saya akan mengasumsikan tingkat pengalaman dan kompetensi yang layak dalam bekerja dengan baris perintah. Jika Anda memahami cara menggunakan perintah umum seperti cd , ls , cp dan mv , maka Anda akan baik-baik saja saat kita membahas berbagai contoh. Jika Anda merasa tidak nyaman menggunakan perintah ini, posting pengantar yang bagus tersedia di Smashing Magazine. Mari kita mulai dengan kakek dari mereka semua: Grunt.

gerutuan

Grunt adalah pelari tugas berbasis JavaScript populer pertama. Saya telah menggunakan Grunt dalam beberapa bentuk sejak 2012. Ide dasar di balik Grunt adalah Anda menggunakan file JavaScript khusus, Gruntfile.js , untuk mengonfigurasi berbagai plugin untuk menyelesaikan tugas. Ini memiliki ekosistem plugin yang luas dan merupakan alat yang sangat matang dan stabil. Grunt memiliki direktori web fantastis yang mengindeks sebagian besar plugin (sekitar 5.500 saat ini). Kejeniusan sederhana Grunt adalah kombinasi JavaScript dan gagasan file konfigurasi umum (seperti makefile), yang memungkinkan lebih banyak pengembang untuk berkontribusi dan menggunakan Grunt dalam proyek mereka. Ini juga berarti bahwa Grunt dapat ditempatkan di bawah sistem kontrol versi yang sama dengan proyek lainnya.

Grunt sudah teruji dalam pertempuran dan stabil. Sekitar waktu penulisan, versi 1.0.0 dirilis, yang merupakan pencapaian besar bagi tim Grunt. Karena Grunt sebagian besar mengonfigurasi berbagai plugin untuk bekerja bersama, Grunt bisa menjadi kusut (yaitu berantakan dan membingungkan untuk dimodifikasi) dengan cukup cepat. Namun, dengan sedikit perhatian dan pengaturan (memecah tugas menjadi file logis!), Anda bisa membuatnya melakukan keajaiban untuk proyek apa pun.

Dalam kasus yang jarang terjadi di mana plugin tidak tersedia untuk menyelesaikan tugas yang Anda butuhkan, Grunt menyediakan dokumentasi tentang cara menulis plugin Anda sendiri. Yang perlu Anda ketahui untuk membuat plugin Anda sendiri adalah JavaScript dan API Grunt. Anda hampir tidak perlu membuat plugin sendiri, jadi mari kita lihat cara menggunakan Grunt dengan plugin yang cukup populer dan berguna!

Sebuah contoh

Mari kita lihat bagaimana sebenarnya Grunt bekerja. Menjalankan grunt di baris perintah akan memicu program baris perintah Grunt yang mencari Gruntfile.js di root direktori. Gruntfile.js berisi konfigurasi yang mengontrol apa yang akan dilakukan Grunt. Dalam hal ini, Gruntfile.js dapat dilihat sebagai semacam buku masak yang diikuti oleh juru masak (yaitu Grunt, programnya); dan, seperti buku masak lainnya, Gruntfile.js akan berisi banyak resep (mis. tugas).

Kami akan menempatkan Grunt melalui langkah dengan menggunakan plugin Grunticon untuk menghasilkan ikon untuk aplikasi web hipotetis. Grunticon mengambil direktori SVG dan mengeluarkan beberapa aset:

• file CSS dengan basis-64 SVG yang dikodekan sebagai gambar latar;
• file CSS dengan versi PNG dari basis-64 SVG yang dikodekan sebagai gambar latar;
• file CSS yang mereferensikan file PNG individual untuk setiap ikon.

Tiga file berbeda mewakili berbagai kemampuan browser dan perangkat seluler. Perangkat modern akan menerima SVG resolusi tinggi sebagai satu permintaan (yaitu satu file CSS). Peramban yang tidak menangani SVG tetapi menangani aset yang disandikan basis-64 akan mendapatkan lembar gaya PNG basis-64. Terakhir, browser apa pun yang tidak dapat menangani kedua skenario tersebut akan mendapatkan lembar gaya "tradisional" yang mereferensikan PNG. Semua ini dari satu direktori SVG!

Konfigurasi tugas ini terlihat seperti ini:

 module.exports = function(grunt) { grunt.config("grunticon", { icons: { files: [ { expand: true, cwd: 'grunticon/source', src: ["*.svg", ".png"], dest: 'dist/grunticon' } ], options: [ { colors: { "blue": "blue" } } ] } }); grunt.loadNpmTasks('grunt-grunticon'); };

Mari kita berjalan melalui berbagai langkah di sini:

1. Anda harus menginstal Grunt secara global.
2. Buat file Gruntfile.js di root proyek. Yang terbaik adalah juga menginstal Grunt sebagai ketergantungan npm dalam file package.json Anda bersama dengan Grunticon melalui npm i grunt grunt-grunticon --save-dev .
3. Buat direktori SVG dan direktori tujuan (tempat aset yang dibangun akan pergi).
4. Tempatkan skrip kecil di head HTML Anda, yang akan menentukan ikon apa yang akan dimuat.

Berikut tampilan direktori Anda sebelum menjalankan tugas Grunticon:

 |-- Gruntfile.js |-- grunticon | `-- source | `-- logo.svg `-- package.json
|-- Gruntfile.js |-- grunticon | `-- source | `-- logo.svg `-- package.json

Setelah hal-hal tersebut diinstal dan dibuat, Anda dapat menyalin cuplikan kode di atas ke Gruntfile.js . Anda kemudian dapat menjalankan grunt grunticon dari baris perintah dan melihat tugas Anda dijalankan.

Cuplikan di atas melakukan beberapa hal:

• menambahkan objek config baru ke Grunt pada baris 32 bernama grunticon ;
• mengisi berbagai opsi dan parameter untuk Grunticon di objek icons ;
• akhirnya, menarik plugin Grunticon melalui loadNPMTasks .

Seperti inilah tampilan direktori Anda pasca-Grunticon:

 |-- Gruntfile.js |-- dist | `-- grunticon | |-- grunticon.loader.js | |-- icons.data.png.css | |-- icons.data.svg.css | |-- icons.fallback.css | |-- png | | `-- logo.png | `-- preview.html |-- grunticon | `-- source | `-- logo.svg `-- package.json
|-- Gruntfile.js |-- dist | `-- grunticon | |-- grunticon.loader.js | |-- icons.data.png.css | |-- icons.data.svg.css | |-- icons.fallback.css | |-- png | | `-- logo.png | `-- preview.html |-- grunticon | `-- source | `-- logo.svg `-- package.json

Ini dia — selesai! Dalam beberapa baris konfigurasi dan beberapa instalasi paket, kami telah mengotomatiskan pembuatan aset ikon kami! Mudah-mudahan, ini mulai menggambarkan kekuatan pelari tugas: keandalan, efisiensi, dan portabilitas.

Gulp: Blok LEGO Untuk Sistem Bangun Anda

Gulp muncul beberapa saat setelah Grunt dan bercita-cita menjadi alat pembuatan yang tidak semuanya konfigurasi tetapi kode aktual. Gagasan di balik kode di atas konfigurasi adalah bahwa kode jauh lebih ekspresif dan fleksibel daripada modifikasi file konfigurasi tanpa akhir. Rintangan dengan Gulp adalah membutuhkan lebih banyak pengetahuan teknis daripada Grunt. Anda harus terbiasa dengan API streaming Node.js dan terbiasa menulis JavaScript dasar.

Penggunaan aliran Node.js oleh Gulp adalah alasan utama mengapa ini lebih cepat daripada Grunt. Menggunakan stream berarti bahwa, alih-alih menggunakan sistem file sebagai "basis data" untuk transformasi file, Gulp menggunakan transformasi dalam memori. Untuk informasi lebih lanjut tentang streaming, lihat dokumentasi API streaming Node.js, bersama dengan buku pegangan streaming.

Sebuah contoh

Seperti di bagian Grunt, kita akan menempatkan Gulp melalui langkah-langkah dengan contoh langsung: menggabungkan modul JavaScript kita ke dalam satu file aplikasi.

Menjalankan Gulp sama dengan menjalankan Grunt. Program baris perintah gulp akan mencari buku resep masakan (yaitu Gulpfile.js ) di direktori tempat program itu dijalankan.

Membatasi jumlah permintaan yang dibuat setiap halaman dianggap sebagai praktik terbaik kinerja web (terutama di seluler). Namun berkolaborasi dengan pengembang lain jauh lebih mudah jika fungsionalitas dibagi menjadi beberapa file. Masukkan pelari tugas. Kita dapat menggunakan Gulp untuk menggabungkan beberapa file JavaScript untuk aplikasi kita sehingga klien seluler harus memuat satu file, bukan banyak.

Gulp memiliki ekosistem plugin yang sangat besar seperti Grunt. Jadi, untuk mempermudah tugas ini, kita akan bersandar pada plugin gulp-concat. Katakanlah struktur proyek kita terlihat seperti ini:

 |-- dist | `-- app.js |-- gulpfile.js |-- package.json `-- src |-- bar.js `-- foo.js

Dua file JavaScript ada di direktori src kami, dan kami ingin menggabungkannya menjadi satu file, app.js , di direktori dist/ kami. Kita dapat menggunakan tugas Gulp berikut untuk menyelesaikannya.

 var gulp = require('gulp'); var concat = require('gulp-concat'); gulp.task('default', function() { return gulp.src('./src/*.js') .pipe(concat('app.js')) .pipe(gulp.dest('./dist/')); });

Bit penting ada di panggilan balik gulp.task . Di sana, kami menggunakan gulp.src API untuk mendapatkan semua file yang diakhiri dengan .js di direktori src kami. API gulp.src mengembalikan aliran file tersebut, yang kemudian dapat kita teruskan (melalui API pipe ) ke plugin gulp-concat. Plugin kemudian menggabungkan semua file dalam aliran dan meneruskannya ke fungsi gulp.dest . Fungsi gulp-dest hanya menulis input yang diterimanya ke disk.

Anda dapat melihat bagaimana Gulp menggunakan aliran untuk memberi kami "blok pembangun" atau "rantai" untuk tugas kami. Alur kerja Gulp yang khas terlihat seperti ini:

1. Dapatkan semua file dari jenis tertentu.
2. Berikan file-file itu ke plugin (concat!), Atau lakukan beberapa transformasi.
3. Lewati file yang diubah itu ke blok lain (dalam kasus kami, dest tujuan, yang mengakhiri rantai kami).

Seperti pada contoh Grunt, menjalankan gulp dari root direktori proyek kita akan memicu tugas default yang ditentukan dalam file Gulpfile.js . Tugas ini menggabungkan file kita dan mari kita lanjutkan dengan mengembangkan aplikasi atau situs web kita.

paket web

Tambahan terbaru untuk klub pelari tugas JavaScript adalah Webpack. Webpack menyebut dirinya sebagai "bundel modul", yang berarti dapat secara dinamis membangun bundel kode JavaScript dari beberapa file terpisah menggunakan pola modul seperti pola CommonJS. Webpack juga memiliki plugin, yang disebut loader.

Webpack masih cukup muda dan memiliki dokumentasi yang agak padat dan membingungkan. Oleh karena itu, saya akan merekomendasikan repositori Webpack Pete Hunt sebagai titik awal yang bagus sebelum masuk ke dokumentasi resmi. Saya juga tidak akan merekomendasikan Webpack jika Anda baru mengenal pelari tugas atau tidak merasa mahir dalam JavaScript. Selain masalah-masalah itu, itu masih merupakan alat yang lebih spesifik daripada keluasan umum Grunt dan Gulp. Banyak orang menggunakan Webpack bersama Grunt atau Gulp karena alasan ini, membiarkan Webpack unggul dalam menggabungkan modul dan membiarkan Grunt atau Gulp menangani tugas yang lebih umum.

Webpack akhirnya memungkinkan kita menulis kode gaya Node.js untuk browser, kemenangan besar untuk produktivitas dan membuat pemisahan yang bersih dari masalah dalam kode kita melalui modul. Mari gunakan Webpack untuk mencapai hasil yang sama seperti yang kita lakukan dengan contoh Gulp, menggabungkan beberapa file JavaScript menjadi satu file aplikasi.

Sebuah contoh

Webpack sering digunakan dengan Babel untuk mengubah kode ES6 ke ES5. Transpiling kode dari ES6 ke ES5 memungkinkan pengembang menggunakan standar ES6 yang muncul saat menyajikan ES5 ke browser atau lingkungan yang belum sepenuhnya mendukung ES6. Namun, dalam contoh ini, kami akan fokus pada pembuatan bundel sederhana dari dua file kami dari contoh Gulp. Untuk memulai, kita perlu menginstal Webpack dan membuat file konfigurasi, webpack.config.js . Berikut tampilan file kami:

 module.exports = { entry: "./src/foo.js", output: { filename: "app.js", path: "./dist" } };

Dalam contoh ini, kami mengarahkan Webpack ke file src/foo.js kami untuk memulai pekerjaannya dengan menjalankan grafik ketergantungan kami. Kami juga telah memperbarui file foo.js kami agar terlihat seperti ini:

 //foo.js var bar = require("./bar"); var foo = function() { console.log('foo'); bar(); }; module.exports = foo;

Dan kami telah memperbarui file bar.js kami agar terlihat seperti ini:

 //bar.js var bar = function() { console.log('bar'); }; module.exports = bar;

Ini adalah contoh CommonJS yang sangat mendasar. Anda akan melihat bahwa file-file ini sekarang "mengekspor" sebuah fungsi. Pada dasarnya, CommonJS dan Webpack memungkinkan kita untuk mulai mengatur kode kita ke dalam modul mandiri yang dapat diimpor dan diekspor ke seluruh aplikasi kita. Webpack cukup pintar untuk mengikuti kata kunci impor dan ekspor dan untuk menggabungkan semuanya ke dalam satu file, dist/app.js . Kami tidak lagi perlu mempertahankan tugas penggabungan, dan kami hanya perlu mematuhi struktur untuk kode kami sebagai gantinya. Jauh lebih baik!

Memperluas

Webpack mirip dengan Gulp dalam hal "Ini hanya JavaScript." Itu dapat diperluas untuk melakukan tugas pelari tugas lainnya melalui sistem pemuatnya. Misalnya, Anda dapat menggunakan css-loader dan sass-loader untuk mengkompilasi Sass ke dalam CSS dan bahkan menggunakan Sass di JavaScript Anda dengan membebani pola require yang diperlukan! Namun, saya biasanya menganjurkan untuk menggunakan Webpack semata-mata untuk membangun modul JavaScript dan untuk menggunakan pendekatan lain yang lebih umum untuk menjalankan tugas (misalnya, skrip Webpack dan npm atau Webpack dan Gulp untuk menangani yang lainnya).

Skrip npm

skrip npm adalah tren hipster terbaru, dan untuk alasan yang bagus. Seperti yang telah kita lihat dengan semua alat ini, jumlah dependensi yang mungkin mereka perkenalkan ke sebuah proyek pada akhirnya bisa lepas kendali. Posting pertama yang saya lihat menganjurkan skrip npm sebagai titik masuk untuk proses pembuatan adalah oleh James Halliday. Postingannya dengan sempurna merangkum kekuatan skrip npm yang diabaikan (penekanan milik saya):

Ada beberapa alat canggih untuk melakukan otomatisasi pembangunan pada proyek JavaScript yang belum pernah saya rasakan daya tariknya karena perintah npm run yang kurang dikenal telah sangat memadai untuk semua yang perlu saya lakukan sambil mempertahankan jejak konfigurasi yang sangat kecil .

Apakah Anda menangkap bagian terakhir di akhir? Daya tarik utama skrip npm adalah bahwa mereka memiliki "jejak konfigurasi yang sangat kecil." Ini adalah salah satu alasan utama mengapa skrip npm mulai populer (hampir empat tahun kemudian, sayangnya). Dengan Grunt, Gulp dan bahkan Webpack, seseorang akhirnya mulai tenggelam dalam plugin yang membungkus binari dan menggandakan jumlah dependensi dalam sebuah proyek.

Keith Cirkel memiliki tutorial masuk tentang penggunaan npm untuk menggantikan Grunt atau Gulp. Dia memberikan cetak biru tentang cara memanfaatkan sepenuhnya kekuatan skrip npm, dan dia memperkenalkan plugin penting, Parallel Shell (dan sejumlah lainnya seperti itu).

Sebuah contoh

Di bagian kami tentang Grunt, kami mengambil modul populer Grunticon dan membuat ikon SVG (dengan fallback PNG) dalam tugas Grunt. Ini dulunya merupakan satu-satunya titik sakit dengan skrip npm untuk saya. Untuk sementara, saya akan tetap menginstal Grunt untuk proyek hanya untuk menggunakan Grunticon. Saya benar-benar akan "membayar" ke Grunt dalam tugas npm saya untuk mencapai permulaan task-runner (atau, saat kami mulai menyebutnya di tempat kerja, alat build turducken). Untungnya, The Filament Group, grup fantastis di belakang Grunticon, merilis versi mandiri (yaitu bebas Grunt) dari alat mereka, Grunticon-Lib. Jadi, mari kita gunakan untuk membuat beberapa ikon dengan skrip npm!

Contoh ini sedikit lebih maju daripada tugas skrip npm biasa. Tugas skrip npm tipikal adalah panggilan ke alat baris perintah, dengan flag atau file konfigurasi yang sesuai. Berikut adalah tugas yang lebih umum yang mengkompilasi Sass kami ke CSS:

 "sass": "node-sass src/scss/ -o dist/css",

Lihat bagaimana itu hanya satu baris dengan berbagai opsi? Tidak ada file tugas yang diperlukan, tidak ada alat build untuk berputar — cukup npm run sass dari baris perintah, dan Anda Sass sekarang adalah CSS. Salah satu fitur skrip npm yang sangat bagus adalah bagaimana Anda dapat menyatukan tugas skrip. Misalnya, kita ingin menjalankan beberapa tugas sebelum tugas Sass kita berjalan. Kami akan membuat entri skrip baru seperti ini:

 "presass": "echo 'before sass',

Itu benar: pre- memahami prefiks. Itu juga memahami awalan post- . Entri skrip apa pun dengan nama yang sama dengan entri skrip lain dengan awalan pre- atau sesudahnya akan dijalankan sebelum atau post- entri tersebut.

Mengonversi ikon kita akan membutuhkan file Node.js yang sebenarnya. Ini tidak terlalu serius, meskipun. Cukup buat direktori tasks , dan buat file baru bernama grunticon.js atau icons.js atau apa pun yang masuk akal bagi mereka yang mengerjakan proyek. Setelah file dibuat, kita dapat menulis beberapa JavaScript untuk menjalankan proses Grunticon kita.

Catatan: Semua contoh ini menggunakan ES6, jadi kita akan menggunakan babel-node untuk menjalankan tugas kita. Anda dapat dengan mudah menggunakan ES5 dan Node.js, jika itu lebih nyaman.

 import icons from "grunticon-lib"; import globby from "globby"; let files = globby.sync('src/icons/*'); let options = { colors: { "blue": "blue" } }; let icon = new icons(files, 'dist/icons', options); icon.process();

Mari masuk ke kode dan mencari tahu apa yang terjadi.

1. Kami import (yaitu membutuhkan) dua perpustakaan, grunticon-lib dan globby . Globby adalah salah satu alat favorit saya, dan itu membuat bekerja dengan file dan gumpalan begitu mudah. Globby meningkatkan Node.js Glob (pilih semua file JavaScript melalui ./*.js ) dengan dukungan Promise. Dalam hal ini, kami menggunakannya untuk mendapatkan semua file di direktori src/icons .
2. Setelah kami melakukannya, kami menetapkan beberapa opsi dalam objek options dan kemudian memanggil Grunticon-Lib dengan tiga argumen:
   • file ikon,
   • tempat tujuan,
   • pilihannya. Pustaka mengambil alih dan mengunyah ikon-ikon itu dan akhirnya membuat versi SVG dan PNG di direktori yang kita inginkan.
3. Kami hampir selesai. Ingat bahwa ini berada dalam file terpisah, dan kita perlu menambahkan "pengait" untuk memanggil file ini dari skrip npm kita, seperti ini: "icons": "babel-node tasks/icons.js" .
4. Sekarang kita dapat menjalankan npm run icons , dan ikon kita akan dibuat setiap saat.

skrip npm menawarkan tingkat kekuatan dan fleksibilitas yang sama seperti pelari tugas lainnya, tanpa hutang plugin.

Perincian Pelari Tugas Tercakup Di Sini

Beberapa Kemenangan Mudah

Semua contoh dan pelari tugas ini mungkin tampak berlebihan, jadi mari kita uraikan. Pertama, saya harap Anda tidak mengambil dari artikel ini bahwa apapun task runner atau sistem build yang Anda gunakan saat ini harus segera diganti dengan yang disebutkan di sini. Mengganti sistem penting seperti ini tidak boleh dilakukan tanpa banyak pertimbangan. Berikut saran saya untuk memutakhirkan sistem yang ada: Lakukan secara bertahap.

Skrip Pembungkus!

Salah satu pendekatan inkremental adalah dengan melihat menulis beberapa skrip npm "pembungkus" di sekitar pelari tugas yang ada untuk menyediakan kosakata umum untuk langkah-langkah pembuatan yang berada di luar pelari tugas yang sebenarnya digunakan. Skrip pembungkus bisa sesederhana ini:

 { "scripts": { "start": "gulp" } }

Banyak proyek menggunakan blok skrip start dan test npm untuk membantu pengembang baru menyesuaikan diri dengan cepat. Skrip pembungkus memang memperkenalkan lapisan abstraksi lain ke rantai pembuatan runner tugas Anda, namun saya pikir layak untuk dapat menstandarisasi di sekitar primitif npm (mis. test ). Perintah npm memiliki umur panjang yang lebih baik daripada alat individual.

Taburkan di Webpack Kecil

Jika Anda atau tim Anda merasa sulit untuk mempertahankan "urutan bundel" yang rapuh untuk JavaScript Anda, atau Anda ingin meningkatkan ke ES6, pertimbangkan ini sebagai kesempatan untuk memperkenalkan Webpack ke sistem yang menjalankan tugas Anda. Webpack sangat bagus karena Anda dapat menggunakannya sebanyak atau sesedikit yang Anda inginkan, namun tetap mendapatkan nilai darinya. Mulailah hanya dengan membundel kode aplikasi Anda, lalu tambahkan babel-loader ke dalam campuran. Webpack memiliki kedalaman fitur yang dapat mengakomodasi hampir semua penambahan atau fitur baru untuk beberapa waktu.

Mudah Menggunakan PostCSS Dengan Skrip npm

PostCSS adalah kumpulan plugin yang mengubah dan meningkatkan CSS setelah ditulis dan diproses sebelumnya. Dengan kata lain, ini adalah post-processor. Cukup mudah untuk memanfaatkan PostCSS menggunakan skrip npm. Katakanlah kita memiliki skrip Sass seperti pada contoh sebelumnya:

 "sass": "node-sass src/scss/ -o dist/css",

Kita dapat menggunakan kata kunci lifecycle skrip npm untuk menambahkan skrip agar berjalan secara otomatis setelah tugas Sass:

 "postsass": "postcss --use autoprefixer -c postcss.config.json dist/css/*.css -d dist/css",

Script ini akan berjalan setiap kali script Sass dijalankan. Paket postcss-cli sangat bagus, karena Anda dapat menentukan konfigurasi dalam file terpisah. Perhatikan bahwa dalam contoh ini, kami menambahkan entri skrip lain untuk menyelesaikan tugas baru; ini adalah pola umum saat menggunakan skrip npm. Anda dapat membuat alur kerja yang menyelesaikan semua berbagai tugas yang dibutuhkan aplikasi Anda.

Kesimpulan

Pelari tugas dapat memecahkan masalah nyata. Saya telah menggunakan pelari tugas untuk mengkompilasi berbagai build aplikasi JavaScript, tergantung pada apakah targetnya adalah produksi atau pengembangan lokal. Saya juga menggunakan pelari tugas untuk mengkompilasi template Handlebars, untuk menyebarkan situs web ke produksi dan secara otomatis menambahkan awalan vendor yang tidak terjawab di Sass saya. Ini bukan tugas sepele, tetapi begitu mereka terbungkus dalam pelari tugas, mereka menjadi mudah.

Pelari tugas terus berkembang dan berubah. Saya sudah mencoba untuk menutupi yang paling sering digunakan di zeitgeist saat ini. Namun, ada juga yang belum saya sebutkan, seperti Brokoli, Brunch, dan Harpa. Ingatlah bahwa ini hanyalah alat: Gunakan hanya jika mereka memecahkan masalah tertentu, bukan karena semua orang menggunakannya. Selamat menjalankan tugas!