Bagaimana Mengemaskini Tugas dalam Kod Visual Studio

Menggunakan alat binaan seperti Grunt atau Gulp dapat menjimatkan banyak masa pada tahap pembangunan oleh mengotomatisasi beberapa berulang “Tugas”. Sekiranya anda memilih untuk Kod Visual Studio sebagai editor kod pergi anda, alur kerja anda mungkin lebih berstruktur dan, akhirnya, menjadi lebih produktif.

Dibina dengan Node.js di terasnya, Visual Studio Code membolehkan anda laksanakan tugas tanpa meninggalkan tetingkap editor. Dan kami akan menunjukkan kepada anda bagaimana untuk melakukannya dalam jawatan ini.

Mari kita mulakan.

Pra-syarat

Untuk memulakan, anda perlu mempunyai Node, NPM (Pengurus Pakej Nod), dan CLI (Barisan Peranti Baris) bagi alat binaan masing-masing yang dipasang di dalam sistem anda. Jika anda tidak pasti sama ada anda mempunyai semua ini dipasang, mengesahkan ia semudah menaip baris arahan.

Saya juga akan menganggap bahawa fail dan direktori dalam projek anda berada di tempat yang sepatutnya, termasuk config fail, seperti gulpfile.js atau Gruntfile.js jika anda menggunakan Grunt sebaliknya. Dan kebergantungan projek yang didaftarkan di package.json juga perlu dipasang pada ketika ini.

Berikut adalah direktori dan fail projek kami yang diwujudkan untuk tujuan a demonstrasi dalam artikel ini. Projek anda pastinya akan jauh berbeza; anda mungkin mempunyai lebih banyak atau sedikit fail.

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

Kami menggunakan Gulp sebagai alat binaan kami dalam projek kami. Kami mempunyai beberapa Tugas yang didaftarkan di gulpfile.js seperti berikut:

 var gulp = require ('gulp'); var uglify = require ('gulp-uglify'); var sass = require ('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: 'compressed')) .pipe (gulp.dest ('./css' ; gulp.task ('automate', fungsi () gulp.watch ([sassSrc, jsSrc], ['skrip', 'gaya']); gulp.task ('default', ['scripts', 'styles', 'automate']); 

Terdapat empat tugas khusus yang telah kami tentukan:

• skrip: tugas yang akan menyusun fail JavaScript kami serta keluarkan output melalui plugin Gulp UglifyJS.
• gaya: tugas yang akan menyusun fail SCSS kami ke dalam CSS serta memampatkan output.
• automate: tugas yang akan mengautomasikan gaya dan skrip tugas walaupun keletihan terbina dalam menonton utiliti.
• lalai: tugas yang akan mengendalikan tiga tugas yang diformatkan bersama sekaligus.

Oleh kerana alat binaan dalam projek kami siap, kami kini boleh terus mengotomatikkan tugas-tugas yang telah kami tentukan di dalam gulpfile.js.

Walau bagaimanapun, sekiranya anda tidak biasa bekerja dengan mana-mana alat yang disebutkan, saya sangat mengesyorkan anda untuk melihat beberapa jawatan terdahulu kami untuk membawa anda ke dalam subjek sebelum meneruskan lagi.

• Bagaimana Menggunakan Genggaman Untuk Mengautomasikan Aliran Kerja Anda
• Bermula Dengan Gulp.js
• Battle Of Build Scripts: Gulp vs Grunt

Jalankan dan Automasi Tugas

Berjalan dan mengotomatikkan “Tugas” dalam Visual Studio Code agak mudah. Pertama, lancarkan Palet Command dengan menekan gabungan kekunci Shift + Cmd + P atau melalui bar menu, Lihat> Palet Perintah jika itu lebih mudah untuk anda. Kemudian, taipkan Tugas, dan pilih “Tugas: Main Tugas” dari beberapa pilihan yang ditunjukkan dalam hasilnya.

Kod Studio Visual pintar; ia tahu bahawa kita menggunakan Gulp, ambil gulpfile.js, dan mendedahkan senarai Tugasan yang telah kami tentukan dalam fail.

Di sini, mari kita pilih lalai Tugas. Fail stylesheets SCSS dan JavaScript akan dikumpulkan setelah memilih Tugas ini, dan ia juga akan mencetuskan automate Tugas yang akan membenarkan gaya dan skrip Tugas untuk menjalankan autonomi terus ke hadapan.

Apabila menukar fail - lembaran gaya atau fail JavaScript - ia akan disusun secara automatik. Kod Studio Visual juga menghasilkan laporan tepat pada masanya untuk setiap kejayaan dan kesilapan yang berlaku dalam operasi bina.

Pengintegrasian yang mendalam

Selain itu, kami dapat mengintegrasikan projek kami ke dalam Kod Visual Studio untuk menyelaraskan aliran kerja kami. Dan mengintegrasikan Tugas kami dalam Visual Studio Code mudah dan cepat.

Pelancaran Palet Command dan pilih “Mengkonfigurasi Runner Task”. Kod Studio Visual akan memberikan senarai alat binaan yang menyokongnya. Dalam kes ini, kami pilih “Gulp”, kerana itu adalah yang kita gunakan dalam projek kami dalam artikel ini.

Kod Studio Visual sekarang telah membuat fail bernama baru tasks.json di bawah .vscode dalam direktori projek anda. tasks.json, pada ketika ini, mengandungi konfigurasi kosong.

Dan seperti yang anda boleh lihat di bawah, yang tugas harta dalam masa ini hanyalah satu array kosong.

"version": "0.1.0", "command": "gulp", "isShellCommand": true, "args": ["--no-color"], "tasks": []

Teruskan tugas nilai seperti berikut.

"version": "0.1.0", "command": "gulp", "isShellCommand": true, "args": ["--no-color"], lalai "," isBuildCommand ": true,]

The taskName menentukan nama tugas dalam kami gulpfile.js yang kita mahu lari. The isBuildCommand harta mentakrifkan lalai perintah sebagai “Bina” perintah. Sekarang, daripada pergi ke Palette Command, anda boleh tekan kekunci gabungan Shift + Cmd + B.

Selalunya anda boleh memilih “Run Task Build” hasil carian Tugas di Palet Perintah.

Mengakhiri

Saya rasa Visual Studio Code adalah editor kod dengan masa depan yang hebat. Ia pantas dan dibina dengan beberapa ciri berguna dari kotak, termasuk satu yang telah kami tunjukkan dalam artikel ini.

Kami telah melihat bagaimana untuk menjalankan Tugas dari Gulp; anda juga boleh menggunakan Grunt sebaliknya. Kami telah melihat bagaimana untuk mengintegrasikan tugas ke dalam Visual Studio Code dan berjalan dengan kombinasi utama, yang menjadikan aliran kerja kami lebih efisien.

Mudah-mudahan, anda dapati artikel ini berguna sebagai rujukan untuk menjalankan tugas membina, dan jangan lupa untuk menyemak artikel kami sebelumnya untuk lebih banyak tips untuk memanfaatkan sepenuhnya Visual Studio Code.

• Kod Studio Visual: 5 Ciri-ciri Awesome yang Menjadikannya sebagai Frontrunner
• Cara Menyesuaikan Kod Visual Studio
• 8 Pelanjutan Kod Studio Visual yang kuat untuk Pemaju Barisan hadapan
• Kod Studio Visual: Peningkatan Produktiviti melalui Pengurusan Mengikat Utama
• Pengaruh Rancangan Microsoft Inclusive dalam Visual Studio Code