Come automatizzare le attività nel codice di Visual Studio

Usando uno strumento di costruzione come Grunt o Gulp puoi risparmiare un sacco di tempo nella fase di sviluppo automatizzando alcuni ripetitivi “Compiti”. Se si sceglie Visual Studio Code come editor di go-to-code, il flusso di lavoro potrebbe essere ancora più snello e, alla fine, essere più produttivo.

Costruito con Node.js al suo interno, Visual Studio Code ti permette di eseguire le attività senza dover lasciare la finestra dell'editor. E ti mostreremo come farlo in questo post.

Cominciamo.

Pre-requisiti

Per cominciare, avrai bisogno di avere Node, NPM (Node Package Manager) e la CLI (Command Line Interface) del rispettivo strumento di compilazione tutti installati nel tuo sistema. Se non sei sicuro di aver installato tutto questo, verificarlo è facile come digitare le righe di comando.

Immaginerò anche che i file e le directory del progetto siano nella loro giusta posizione, incluso il config file, come ad esempio il gulpfile.js o Gruntfile.js se usi Grunt. E dipendenze progetto registrate in package.json dovrebbe anche essere installato a questo punto.

Di seguito sono riportate le nostre directory e file di progetto, creati per lo scopo di a dimostrazione in questo articolo. Il tuo progetto sarebbe sicuramente molto diverso; potresti avere più o meno file.

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

Utilizziamo Gulp come nostro strumento di costruzione nel nostro progetto. Abbiamo un numero di attività registrate nel gulpfile.js come segue:

 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 ('automatate', function () gulp.watch ([sassSrc, jsSrc], ['scripts', 'styles']);); gulp.task ('default', ['scripts', 'styles', 'automatate']); 

Ci sono specificamente quattro compiti che abbiamo specificato:

• script: l'attività che compila i nostri file JavaScript e minimizza l'output tramite il plugin Gulp UglifyJS.
• stili: l'attività che compila i nostri file SCSS in CSS e comprime l'output.
• automatizzare: il compito che automatizzerà il stili e script compito però il gulp integrato orologio utilità.
• predefinito: l'attività che eseguirà tutti e tre i compiti sopra elencati contemporaneamente.

Poiché lo strumento di costruzione nel nostro progetto è tutto pronto, ora possiamo anche automatizzare queste attività che abbiamo definito all'interno di gulpfile.js.

Tuttavia, nel caso in cui non ti sia familiare il lavoro con uno degli strumenti menzionati, ti consiglio vivamente di esaminare alcuni dei nostri post precedenti per metterti in tema prima di procedere ulteriormente.

• Come usare Grunt per automatizzare il tuo flusso di lavoro
• Guida introduttiva a Gulp.js
• The Battle Of Build Scripts: Gulp vs Grunt

Esegui e automatizza le attività

Esecuzione e automazione “Compiti” in Visual Studio Code è abbastanza semplice. Innanzitutto, lanciare il Tavolozza dei comandi premendo la combinazione di tasti Maiusc + Cmd + P o tramite la barra dei menu, Visualizza> Palette comandi se è più conveniente per te. Quindi, digita Compiti, e selezionare “Compiti: Esegui attività” dal numero limitato di opzioni mostrate nel risultato.

Codice di Visual Studio è intelligente; sa che stiamo usando Gulp, prendi gulpfile.js, e rivelare l'elenco di attività che abbiamo definito all'interno del file.

Qui, selezioniamo il predefinito Compito. I fogli di stile SCSS e il file JavaScripts verranno compilati al momento della selezione di questa attività e attiverà anche il automatizzare Compito che permetterà il stili e script Compito di andare avanti autonomamente.

Quando si modifica un file, un foglio di stile o un file JavaScript, verrà automaticamente compilato. Codice di Visual Studio genera anche rapporti tempestivi per ogni successo ed errori che si verificano durante l'operazione di compilazione.

Profonda integrazione

Inoltre, possiamo integrare il nostro progetto in Visual Studio Code per ottimizzare il nostro flusso di lavoro. E l'integrazione dei nostri compiti in Visual Studio Code è facile e veloce.

Avvia la tavolozza dei comandi e seleziona “Configura Task Runner”. Visual Studio Code fornirà un elenco di strumenti di sviluppo che supporta. In questo caso, selezioniamo “Sorso”, poiché quello è quello che stiamo usando nel nostro progetto in questo articolo.

Il codice di Visual Studio dovrebbe ora aver creato un nuovo file chiamato tasks.json sotto .vscode nella directory del tuo progetto. tasks.json, a questo punto, contiene la configurazione nuda.

E come puoi vedere qui sotto, il compiti la proprietà in è attualmente solo una matrice vuota.

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

Estendere la compiti valore come segue.

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

Il taskname specifica il nome del compito nel nostro gulpfile.js che vorremmo correre. Il isBuildCommand la proprietà definisce il predefinito comando come il “Costruire” comando. Ora, piuttosto che aggirare la palette dei comandi, puoi semplicemente premere la combinazione di tasti Maiusc + Cmd + B.

In alternativa è possibile selezionare il “Esegui attività di compilazione” dei risultati della ricerca di attività nella tavolozza dei comandi.

Avvolgendo

Penso che Visual Studio Code sia un editor di codice con un grande futuro. È veloce e costruito con alcune utili funzionalità, incluso uno che abbiamo mostrato in questo articolo.

Abbiamo visto come eseguire un Task da Gulp; puoi anche usare Grunt. Abbiamo visto come integrare l'attività in Visual Studio Code ed eseguirla con una combinazione di tasti che rende il nostro flusso di lavoro più snello.

Si spera che questo articolo sia utile come riferimento per eseguire attività di compilazione e non dimenticare di consultare i nostri articoli precedenti per ulteriori suggerimenti per ottenere il massimo dal codice di Visual Studio.

• Codice di Visual Studio: 5 fantastiche funzionalità che lo rendono un capofila
• Come personalizzare il codice di Visual Studio
• 8 potenti estensioni di codice di Visual Studio per sviluppatori front-end
• Codice di Visual Studio: aumento della produttività tramite la gestione dei binding chiave
• L'influenza di Microsoft Inclusive Design nel codice di Visual Studio