A feladatok automatizálása a Visual Studio kódban

A Grunt vagy a Gulp, mint egy építési eszköz használata sok időt takaríthat meg a fejlesztési szakaszban néhány ismétlődő automatizálás “feladatok”. Ha a Visual Studio kódot választja a go-to-kód szerkesztőként, a munkafolyamata még egyszerűbbé válhat, és végül produktívabb lesz.

A Visual Studio Code a Node.js alapjaival készült futtassa a feladatokat anélkül, hogy el kellene hagynia a szerkesztőablakot. És megmutatjuk Önnek, hogyan kell ezt a posztot csinálni.

Kezdjük.

Előfeltétele

Először is, a Node, NPM (Node Package Manager) és a megfelelő építési eszköz CLI (Command Line Interface) parancsára van szükség. Ha nem biztos benne, hogy az összes telepítve van-e, ellenőrizze, hogy a parancssorok beírása ugyanolyan egyszerű.

Feltételezem továbbá, hogy a projektedben lévő fájlok és könyvtárak a megfelelő helyen vannak, beleértve a config fájl, például a gulpfile.js vagy Gruntfile.js ha helyette Gruntot használ. És a projektben regisztrált függőségek package.json ezen a ponton is telepíteni kell.

A következőkben az a demonstráció ebben a cikkben. A projekt minden bizonnyal más lenne; lehet, hogy több vagy kevesebb fájl található.

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

A Gulp-t építési eszközként használjuk projektünkben. Számos feladatunk van regisztrálva a gulpfile.js alábbiak szerint:

 var gulp = szükséges ('gulp'); var uglify = szükséges ('gulp-uglify'); var sass = szükséges ('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 ('stílusok', függvény () visszatérő gulp.src (sassSrc) .pipe (sass (outputStyle: 'tömörített'))) .pipe (gulp.dest ('./css'));) ; gulp.task ('automate', funkció () gulp.watch ([sassSrc, jsSrc], ['scripts', 'styles']);); gulp.task ('alapértelmezett', ['parancsfájlok', 'stílusok', 'automatizálás')); 

Kifejezetten négy feladat van megadva:

• szkriptek: az a feladat, amely a JavaScript fájljainkat összeállítja, valamint a Gulp UglifyJS bővítményen keresztül a kimenet minifizálását.
• stílusok: az a feladat, amely SCSS fájljainkat CSS-be fordítja, valamint a kimenetet tömöríti.
• automatizálni: a feladat automatizálása stílusok és szkriptek feladat a beépített beépített gpp néz hasznosság.
• alapértelmezett: az a feladat, amely a három fent említett feladatot egyszerre hajtja végre.

Mivel a projektünkben található építési szerszám elkészült, most már tovább tudjuk automatizálni ezeket a feladatokat, amelyeket a gulpfile.js.

Ha azonban nem ismeri a fent említett eszközök bármelyikét, nagyon ajánlom, hogy vizsgálja meg néhány korábbi bejegyzést, hogy a témához jusson, mielőtt továbblépne.

• A Grunt használata a munkafolyamat automatizálásához
• Első lépések a Gulp.js használatával
• A Build Scripts csata: Gulp vs Grunt

Futtassa és automatizálja a feladatokat

Futás és automatizálás “feladatok” a Visual Studio Code-ban elég egyszerű. Először indítsa el a Parancspaletta a Shift + Cmd + P billentyűkombináció vagy a menüsor megnyomásával, Nézet> Parancspaletta ha ez kényelmesebb az Ön számára. Ezután írja be feladatok, és válassza a lehetőséget “Feladatok: Feladat futtatása” az eredményben látható néhány lehetőség közül.

A Visual Studio kód okos; tudja, hogy Gulp-ot használunk, vedd fel gulpfile.js, és tárja fel a feladatban definiált feladatok listáját.

Itt válassza ki a alapértelmezett Feladat. Az SCSS-stíluslapok és a JavaScripts-fájl összeállítása a feladat kiválasztásakor, és ez is kiváltja a automatizálni Feladat, amely lehetővé teszi a stílusok és szkriptek Feladat, hogy önállóan haladjon tovább.

Fájl megváltoztatásakor - stíluslap vagy JavaScript fájl - automatikusan összeáll. A Visual Studio Code szintén időben generál jelentéseket az építési műveletben előforduló minden sikerről és hibáról.

Mély integráció

Továbbá integrálhatjuk projektünket a Visual Studio Code-ba, hogy egyszerűsítsük munkafolyamatunkat. A Visual Studio Code-ban feladatunk integrálása egyszerű és gyors.

Indítsa el a parancspalettát, és válassza ki a lehetőséget “Konfigurálja a feladat futóját”. A Visual Studio Code egy építési eszköz listáját adja, amelyet támogat. Ebben az esetben kiválasztjuk “Korty”, mivel ez az, amit ebben a cikkben használunk projektünkben.

A Visual Studio kódnak most egy új nevet kellett volna létrehoznia tasks.json alatt .vscode a projektkönyvtárban. tasks.json, ezen a ponton csupasz konfiguráció található.

És ahogy az alább látható, a feladatok a tulajdonság jelenleg egy üres tömb.

"verzió": "0.1.0", "parancs": "gulp", "isShellCommand": igaz, "args": ["--no-color"], "feladatok": []

Bővítse a feladatok értéket az alábbiak szerint.

"verzió": "0.1.0", "parancs": "gulp", "isShellCommand": igaz, "args": ["--no-color"], "feladatok": ["taskName": " alapértelmezett "," isBuildCommand ": igaz,]

A a feladat neve meghatározza a feladat nevét gulpfile.js amit szeretnénk futtatni. A isBuildCommand tulajdonság határozza meg a alapértelmezett parancsot “Épít” parancs. Most ahelyett, hogy a Command Palette-re járna, egyszerűen nyomja meg a Shift + Cmd + B billentyűkombinációt.

Alternatívaként kiválaszthatja a “Futtassa az építési feladatot” A Feladatok keresési eredmény a Parancssorban.

Csomagolás

Azt hiszem, a Visual Studio Code egy nagyszerű jövőbeli kódszerkesztő. Gyors és a dobozból néhány praktikus funkcióval rendelkezik, beleértve azt is, amit a cikkben bemutattunk.

Láttuk, hogyan kell futtatni egy feladatot a Gulp-tól; a Gruntot is használhatja. Láttuk, hogyan integrálhatjuk a feladatot a Visual Studio Kódba és futtathatunk egy kulcskombinációval, ami munkafolyamatunkat egyszerűbbé teszi.

Remélhetőleg ez a cikk hasznos lehet az építési feladatok futtatásához, és ne felejtse el elolvasni a korábbi cikkeket, hogy további tippeket kapjon a Visual Studio kódból.

• Visual Studio Kód: 5 Félelmetes funkciók, amelyek előléptetővé teszik
• A Visual Studio kód testreszabása
• 8 Hatékony Visual Studio kódbővítmények a front-end fejlesztők számára
• Visual Studio kód: A termelékenység növelése a kulcskötéskezelés segítségével
• A Microsoft Inclusive Design hatása a Visual Studio kódban