Cara Mengotomatiskan Tugas dalam Visual Studio Code

Menggunakan alat bangun seperti Grunt atau Gulp dapat menghemat banyak waktu Anda dari tahap pengembangan mengotomatisasi beberapa pengulangan “Tugas”. Jika Anda memilih Visual Studio Code sebagai editor kode masuk, alur kerja Anda bisa menjadi lebih ramping dan, pada akhirnya, menjadi lebih produktif.

Dibangun dengan Node.js pada intinya, Visual Studio Code memungkinkan Anda untuk melakukannya menjalankan tugas tanpa harus meninggalkan jendela editor. Dan kami akan menunjukkan kepada Anda bagaimana melakukannya di pos ini.

Mari kita mulai.

Prasyarat

Untuk memulainya, Anda harus memiliki Node, NPM (Node Package Manager), dan CLI (Command Line Interface) dari masing-masing alat pembangunan yang semuanya terinstal di sistem Anda. Jika Anda tidak yakin apakah Anda sudah menginstal semua ini, memverifikasi itu semudah mengetikkan baris perintah.

Saya juga akan menganggap bahwa file dan direktori di proyek Anda ada di tempatnya, termasuk file konfigurasi file, seperti file gulpfile.js atau Gruntfile.js jika Anda menggunakan Grunt sebagai gantinya. Dan dependensi proyek terdaftar di package.json juga harus dipasang pada saat ini.

Berikut ini adalah direktori dan file proyek kami, yang dibuat untuk tujuan a demonstrasi dalam artikel ini. Proyek Anda tentu akan jauh berbeda; Anda mungkin memiliki lebih banyak atau lebih sedikit file.

. ├── css │ ├── sass ├── gulpfile.js ├── index.html ├── js │ ├── src ├── node_modules └── package.json

Kami menggunakan Gulp sebagai alat bangun kami dalam proyek kami. Kami memiliki sejumlah Tugas yang terdaftar di gulpfile.js sebagai berikut:

 var meneguk = membutuhkan ('tegukan'); var uglify = butuhkan ('gulp-uglify'); var sass = membutuhkan ('gulp-sass'); var jsSrc = './js/src/**/*.js'; var sassSrc = './css/sass/**/*.scss'; gulp.task ('scripts', function () return gulp.src (jsSrc) .pipe (uglify ()) .pipe (gulp.dest ('./js'))); gulp.task ('styles', function () return gulp.src (sassSrc) .pipe (sass (outputStyle: 'terkompresi')) .pipe (gulp.dest ('./css'));) ; gulp.task ('automate', function () gulp.watch ([sassSrc, jsSrc], ['scripts', 'styles']);); gulp.task ('default', ['scripts', 'styles', 'automate']);

Secara khusus ada empat tugas yang telah kami tentukan:

skrip: tugas yang akan mengkompilasi file JavaScript kami serta meminimalkan output melalui plugin Gulp UglifyJS.
gaya: tugas yang akan mengkompilasi file SCSS kami ke dalam CSS serta mengkompresi output.
mengotomatisasikan: tugas yang akan mengotomatisasi gaya dan skrip Tugas meskipun tegukan built-in menonton utilitas.
standar: tugas yang akan menjalankan tiga tugas yang ditentukan secara bersamaan.

Karena alat build dalam proyek kami sudah siap, kami sekarang dapat melanjutkan untuk mengotomatiskan tugas-tugas yang telah kami tetapkan di dalam gulpfile.js.

Namun, jika Anda tidak terbiasa bekerja dengan alat apa pun yang disebutkan, saya sangat menyarankan Anda untuk melihat beberapa posting kami sebelumnya untuk mengarahkan Anda ke subjek sebelum melanjutkan lebih jauh..

Cara Menggunakan Grunt Untuk Mengotomatiskan Alur Kerja Anda
Memulai Dengan Gulp.js
The Battle Of Build Scripts: Gulp vs Grunt

Jalankan dan Otomatiskan Tugas

Berjalan dan mengotomatisasi “Tugas” dalam Visual Studio Code cukup mudah. Pertama, luncurkan Palet Komando dengan menekan kombinasi tombol Shift + Cmd + P atau melalui bilah menu, Lihat> Palet Perintah jika itu lebih nyaman bagi Anda. Lalu, ketik Tugas, dan pilih “Tugas: Jalankan Tugas” dari sejumlah pilihan yang ditampilkan dalam hasil.

Visual Studio Code cerdas; ia tahu bahwa kami menggunakan Gulp, ambil gulpfile.js, dan mengungkapkan daftar Tugas yang telah kami tentukan dalam file.

Daftar Tugas yang terdaftar di `gulpfile.js`

Di sini, mari kita pilih standar Tugas. File stylesheet dan JavaScripts SCSS akan dikompilasi setelah memilih Tugas ini, dan itu juga akan memicu mengotomatisasikan Tugas yang akan memungkinkan gaya dan skrip Tugas untuk berjalan maju secara mandiri.

Saat mengganti file - stylesheet atau file JavaScript - file akan dikompilasi secara otomatis. Visual Studio Code juga menghasilkan laporan tepat waktu untuk setiap keberhasilan dan kesalahan yang terjadi dalam operasi build.

Intergrasi yang mendalam

Selain itu, kami dapat mengintegrasikan proyek kami ke dalam Visual Studio Code untuk merampingkan alur kerja kami. Dan mengintegrasikan Tugas kami dalam Visual Studio Code mudah dan cepat.

Luncurkan Palet Perintah dan pilih “Konfigurasikan Pelari Tugas”. Visual Studio Code akan memberikan daftar alat bantu yang didukungnya. Dalam hal ini, kami memilih “Teguk”, karena itulah yang kami gunakan dalam proyek kami di artikel ini.

Visual Studio Code sekarang seharusnya telah membuat file baru bernama task.json dibawah .vscode di direktori proyek Anda. task.json, pada titik ini, berisi konfigurasi kosong.

Dan seperti yang Anda lihat di bawah ini, the tugas properti di saat ini hanyalah sebuah array kosong.

"version": "0.1.0", "command": "tegp", "isShellCommand": true, "args": ["--no-color"], "Tugas": []

Perpanjang tugas nilai sebagai berikut.

"version": "0.1.0", "command": "tegp", "isShellCommand": true, "args": ["--no-color"], "tugas": ["taskName": " default "," isBuildCommand ": true,]

Itu nama tugas menentukan nama tugas di gulpfile.js yang ingin kita jalankan. Itu isBuildCommand properti mendefinisikan standar perintah sebagai “Membangun” perintah. Sekarang, daripada berkeliling di Command Palette, Anda cukup menekan kombinasi tombol Shift + Cmd + B.

Bergantian Anda dapat memilih “Jalankan Build Task” dari hasil pencarian Tugas di Palet Perintah.

Membungkus

Saya pikir Visual Studio Code adalah editor kode dengan masa depan yang hebat. Ini cepat dan dibangun dengan beberapa fitur praktis di luar kotak, termasuk yang telah kami tunjukkan di artikel ini.

Kami telah melihat cara menjalankan Tugas dari Gulp; Anda juga bisa menggunakan Grunt sebagai gantinya. Kami telah melihat bagaimana mengintegrasikan tugas ke dalam Visual Studio Code dan dijalankan dengan kombinasi tombol, yang membuat alur kerja kami lebih efisien.

Mudah-mudahan, Anda menemukan artikel ini bermanfaat sebagai referensi untuk menjalankan tugas-tugas pembangunan, dan jangan lupa untuk membaca artikel kami sebelumnya untuk tips lebih lanjut untuk memanfaatkan Kode Visual Studio secara maksimal.

Visual Studio Code: 5 Fitur Luar Biasa Yang Menjadikannya Pelopor
Cara Menyesuaikan Kode Visual Studio
8 Ekstensi Kode Visual Studio yang Kuat untuk Pengembang Front-end
Visual Studio Code: Meningkatkan Produktivitas melalui Key Binding Management
Pengaruh Desain Inklusif Microsoft dalam Kode Visual Studio