Visual Studio Kodunda Görevler Nasıl Otomatikleştirilir

Grunt veya Gulp gibi bir yapım aracı kullanmak, geliştirme aşamasından size zaman kazandırır. birkaç tekrarlayan otomatikleştirme “Görevler”. Go-to-kod editörünüz olarak Visual Studio Code'u seçerseniz, iş akışınız daha da akıcı ve daha verimli olabilir.

Node.js ile özünde oluşturulmuş Visual Studio Code, Editör penceresinden ayrılmak zorunda kalmadan görevleri yapmak. Ve size bu yazıda nasıl yapılacağını göstereceğiz.

Hadi başlayalım.

Ön koşul

Başlamak için, sisteminizde kurulu olan ilgili derleme aracının Düğümü, NPM'i (Düğüm Paketi Yöneticisi) ve CLI'sini (Komut Satırı Arayüzü) olması gerekir. Bunların hepsinin kurulu olup olmadığından emin değilseniz, bunu doğrulamak komut satırlarını yazmak kadar kolay.

Ayrıca, projenizdeki dosya ve dizinlerin de dahil olmak üzere uygun yerlerinde olduğunu varsayacağım. yapılandırma gibi bir dosya gulpfile.js veya Gruntfile.js Bunun yerine Grunt kullanıyorsanız. Ve proje bağımlılıkları kayıtlı package.json bu noktada da kurulmalıdır.

Proje rehberimiz ve dosyalarımız aşağıdaki gibidir: gösteri Bu makalede. Projeniz kesinlikle çok farklı olurdu; az ya da çok dosyanız olabilir.

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

Gulp'i projemizde yapım aracı olarak kullanıyoruz. Kayıtlı bir dizi Görevimiz var. gulpfile.js aşağıdaki gibi:

 var gulp = zorunlu ('gulp'); var uglify = zorunlu ('gulp-uglify'); var sass = zorunlu ('gulp-sass'); var jsSrc = './js/src/**/*.js'; var sassSrc = './css/sass/**/*.scss'; gulp.task ('betikleri', function () return gulp.src (jsSrc) .pipe (uglify ()) .pipe (gulp.dest ('./js'))); gulp.task ('stiller', function () return gulp.src (sassSrc) .pipe (sass (outputStyle: 'sıkıştırılmış')) .pipe (gulp.dest ('./css'));) ; gulp.task ('otomatikleştir', function () gulp.watch ([sassSrc, jsSrc], ['komut dosyaları', 'stiller']);); gulp.task ('varsayılan', ['komut dosyaları', 'stiller', 'otomatikleştir']);

Belirttiğimiz dört görev var:

senaryo: JavaScript dosyalarımızı derleyecek ve Gulp UglifyJS eklentisi ile çıktıyı minimize edecek görev.
stilleri: SCSS dosyalarımızı CSS içinde derleyecek ve çıktıyı sıkıştıracak görev.
otomatikleştirmek: otomatikleştirecek görev stilleri ve senaryo görev olsa bile izlemek Yarar.
varsayılan: Yukarıda belirtilen üç görevi bir kerede bir araya getirecek görev.

Projemizdeki inşa aracı tamamen hazırlandığı için, şimdi içinde tanımladığımız bu görevleri otomatik hale getirmeye devam edebiliriz. gulpfile.js.

Ancak, belirtilen araçlardan herhangi biriyle çalışma konusunda bilgi sahibi olmadığınız durumda, devam etmeden önce sizi konuya dahil etmek için önceki yayınlarımızdan birkaçına göz atmanızı şiddetle tavsiye ederim..

İş Akışınızı Otomatikleştirmek İçin Grunt Nasıl Kullanılır?
Gulp.js ile Başlarken
Scriptlerin İnşası: Gulp vs Grunt

Görevleri Çalıştır ve Otomatikleştir

Çalıştırma ve otomatikleştirme “Görevler” Visual Studio Kodunda oldukça basittir. İlk önce Komuta Paleti Shift + Cmd + P tuş bileşimine basarak veya menü çubuğunu kullanarak, Görünüm> Komut Paleti eğer bu sizin için daha uygunsa. Sonra yazın Görevler, ve seç “Görevler: Görevi Çalıştır” sonuçta gösterilen birkaç seçenek arasından.

Visual Studio Code akıllıdır; Gulp kullandığımızı biliyor, al gulpfile.js, ve dosya içinde tanımladığımız Görevler listesini gösterir..

Kayıtlı Görevlerin Listesi `gulpfile.js`

İşte, hadi seçelim varsayılan Görev. SCSS stil sayfaları ve JavaScripts dosyası, bu Görevi seçtikten sonra derlenecek ve otomatikleştirmek İzin verecek görev stilleri ve senaryo Özerklikle ilerlemek için görev.

Bir dosyayı değiştirirken - bir stil sayfası veya bir JavaScript dosyası - otomatik olarak derlenir. Visual Studio Code ayrıca derleme işleminde ortaya çıkan her başarı ve hata için zamanında rapor oluşturur..

Derin Entegrasyon

Dahası, iş akışımızı kolaylaştırmak için projemizi Visual Studio Koduna entegre edebiliriz. Görevlerimizi Visual Studio Koduna entegre etmek kolay ve hızlıdır.

Komut Paletini başlatın ve “Görev Çalıştırıcısını Yapılandırma”. Visual Studio Code, desteklediği derleme aracının bir listesini verecektir. Bu durumda seçiyoruz “Yudum”, bu yazıda projemizde kullandığımızdan bu yana.

Visual Studio Code, şimdi adında yeni bir dosya oluşturmalıydı tasks.json altında .vscode proje dizininizde. tasks.json, Bu noktada, çıplak yapılandırma içerir.

Ve aşağıda gördüğünüz gibi görevler özellik şu anda yalnızca boş bir dizi.

"version": "0.1.0", "command": "gulp", "isShellCommand": true, "args": ["--no-color"], "görevler": []

Uzatın görevler aşağıdaki gibi değer.

"version": "0.1.0", "command": "gulp", "isShellCommand": true, "args": ["--no-color"], "görevler": ["taskName": " varsayılan "," isBuildCommand ": true,]

görev adı içindeki görev adını belirtir. gulpfile.js Koşmak istediğimizi. isBuildCommand özellik tanımlar varsayılan komut olarak “İnşa etmek” Komut. Şimdi, Komuta Paletinde dolaşmak yerine, sadece Shift + Cmd + B tuş kombinasyonuna basabilirsiniz..

Alternatif olarak, “Oluşturma Görevini Çalıştır” Komut Paletindeki Görevler arama sonucunun listesi.

Kaydırma

Bence Visual Studio Code harika bir geleceği olan bir kod editörüdür. Bu makalede gösterdiğimiz de dahil olmak üzere, kutunun dışında bazı kullanışlı özelliklerle birlikte hızlı ve hazırlanmıştır..

Gulp’ten nasıl bir görev alacağımızı gördük; Bunun yerine Grunt'u da kullanabilirsiniz. Görevin Visual Studio Koduna nasıl entegre edildiğini ve iş akışımızı daha düzenli hale getiren bir tuş kombinasyonuyla nasıl çalıştığımızı gördük..

Umarım, bu makaleyi derleme görevlerini yürütmek için bir referans olarak bulabilirsiniz ve Visual Studio Kodundan en iyi şekilde yararlanmak için daha fazla ipucu için önceki makalelerimize göz atmayı unutmayın..

Visual Studio Code: Öncü Yapan 5 Muhteşem Özellikler
Visual Studio Kodunu Özelleştirme
Ön Uç Geliştiriciler için 8 Güçlü Visual Studio Kod Uzantısı
Visual Studio Code: Anahtar Ciltleme Yönetimi ile Verimliliği Artırma
Microsoft Inclusive Design'ın Visual Studio Koduna Etkisi