• Articolo

Dicembre 2015

Volume 30 numero 13

Il presente articolo è stato tradotto automaticamente.

Visual Studio - gli strumenti moderni per lo sviluppo Web: Grunt e Gulp

Da Adam Tuliper | Dicembre 2015

Sono disponibili molti strumenti per lo sviluppatore Web moderne. Due spesso presenti nei progetti Web odierne sono i canali di attività JavaScript Grunt e Gulp. Utilizzo di JavaScript per eseguire un'attività potrebbe sembrare un concetto esterno se non avete mai, o se si è abituati ad semplicemente lo sviluppo Web di Visual Studio, ma esistono buone ragioni per provatele. JavaScript attività canali, quale operare all'esterno del browser e in genere utilizzano Node. js nella riga di comando, consentono di eseguire facilmente il front-end attività correlate allo sviluppo, tra cui minimizzazione, concatenazione di più file, determinare le dipendenze di script e l'inserimento di riferimenti a script nell'ordine corretto in pagine HTML, la creazione di unit test harness, elaborazione degli script di compilazione front-end come TypeScript o CoffeeScript e altro ancora.

Quale di essi, Grunt o Gulp?

La scelta di un canale di attività è principalmente un personal o progetto preferenza, a meno che non vi è un plug-in da utilizzare che supporta solo un canale di attività specifico. Le principali differenze sono che tutto dipende dalle impostazioni di configurazione JSON e che ogni attività noioso in genere necessario creare i file intermedi per passare le cose ad altre attività mentre confessano dipende dal codice JavaScript eseguibile (ovvero, non solo JSON) e può eseguire il flusso di risultati da un'attività alla successiva senza la necessità di utilizzare i file temporanei. Gulp è kid più recenti sul blocco e, di conseguenza, è in molti progetti recenti utilizzarlo. Comunque, noioso disponga di molta promotori del noti, ad esempio jQuery, che lo utilizza per build jQuery.... Sia Grunt e Gulp tramite plug-in, che sono moduli è possibile installare per gestire una determinata attività. È disponibile un vasto ecosistema di plug-in, e spesso sono disponibili un pacchetto di attività che supporta sia Grunt e Gulp, pertanto, anche in questo caso, utilizzando in genere uno o l'altro riguarda una scelta personale.

Installazione e utilizzo di Grunt

Il programma di installazione per Grunt e Gulp è Node Package Manager (npm), trattati brevemente nel mio articolo di ottobre (msdn.com/magazine/mt573714). Il comando per installare noioso effettivamente dispone di due parti. Il primo è un'installazione singola dell'interfaccia della riga di comando noioso. Il secondo è l'installazione noioso nella cartella del progetto. L'installazione di due parti consente di utilizzare più versioni di noioso nel sistema e l'interfaccia della riga di comando noioso da qualsiasi percorso:

#only do this once to globally install the grunt command line runner
npm install –g grunt-cli
#run within your project folder one time to create package.json
#this file will track your installed npm dependencies
#like grunt and the grunt plug-ins, similar to bower.json (see the last article)
npm init
#install grunt as a dev dependency into your project (again see last article)
#we will still need a gruntfile.js though to configure grunt
npm install grunt –save-dev

Configurazione di noioso

Il file di configurazione noioso è semplicemente un file JavaScript con una funzione wrapper che contiene la configurazione, il caricamento del plug-in e definizione di attività, come illustrato nella Figura 1.

Figura 1 il File di configurazione Grunt

module.exports = function (grunt) {
  // Where does uglify come from? Installing it via:
  // npm install grunt-contrib-uglify --save-dev
  grunt.initConfig({
    uglify: {
      my_target: {
        files: {
          'dest/output.min.js': '*.js'
        }
      }
    }
  });
  // Warning: make sure you load your tasks from the
  // packages you've installed!
  grunt.loadNpmTasks('grunt-contrib-uglify');
  // When running Grunt at cmd line with no params,
  // you need a default task registered, so use uglify
  grunt.registerTask('default', ['uglify']);
  // You can include custom code right inside your own task,
  // as well as use the above plug-ins
  grunt.registerTask('customtask', function () {
    console.log("\r\nRunning a custom task");
  });
};

È possibile eseguire le attività in Figura 1 nella riga di comando semplicemente chiamando:

#no params means choose the 'default' task (which happens to be uglify)
grunt
#or you can specify a particular task by name
grunt customtask

Al termine dell'operazione, si noterà uglified (minimizzato) e concatenati vale wwwroot/output-min.js. Se si utilizza ASP.NET minimizzazione e aggregazione, si noterà che questo processo è diverso, quest'ultima non è associata all'esecuzione dell'app o persino la compilazione e non esistono molte più opzioni che è possibile scegliere per attività come uglifying. Personalmente, trovo più semplice e comprensibile del flusso di lavoro.

È possibile concatenare le attività con noioso da essere dipendente da un altro. Queste operazioni vengono eseguite in modo sincrono, in modo che uno è necessario completare prima di procedere al successivo.

#Specify uglify must run first and then concat. Because grunt works off
#temp files, many tasks will need to wait until a prior one is done
grunt.registerTask('default', ['uglify', 'concat']);

Installazione e l'uso di Gulp

L'installazione di Gulp è simile all'installazione noioso. Si sarà un po' più dettagliatamente con confessano, ma si noti che è possibile eseguire operazioni simili con; Solo non voglio essere troppo ricorrenti. Gulp include un'installazione globale, è possibile utilizzarlo da qualsiasi percorso nel sistema e un'installazione locale nella cartella del progetto che viene applicata a un particolare progetto. Gulp installato a livello globale verrà trasferito il controllo a quella installata nel progetto locale se la trova, pertanto rispetto della versione del progetto Gulp:

#Only do this once to globally install gulp
npm install –g gulp
#Run within your project folder one time to create package.json
#this file will track your installed npm dependencies
#like gulp and the gulp plug-ins
npm init
#Install gulp as a dev dependency into your project
#we will still need a gulpfile.js to configure gulp
npm install gulp --save-dev

Configurazione gulp e API

Configurazione gulp è molto diverso da quello noioso. File di configurazione gulpfile.js, che include in genere la struttura illustrata nella Figura 2, contiene il "richiede" per il caricamento plug-in e quindi la definizione di attività. Si noti che non si utilizza le impostazioni di configurazione JSON qui. al contrario, le attività sono basate su codice.

Figura 2, il File di configurazione Gulp

// All the 'requires' to load your
// various plug-ins and gulp itself
var gulp = require('gulp');
var concat = require('gulp-concat');
// A custom task, run via: gulp customtask
gulp.task('customtask', function(){
  // Some custom task
});
// Define a default task, run simply via: gulp
gulp.task('default', function () {
  gulp.src('./lib/scripts/*.js')
    .pipe(concat('all-scripts.js'))
    .pipe(gulp.dest('./wwwroot/scripts'));
});

Gulp funziona attraverso le API e i concetti chiave: src, dest, pipe, attività e globs. L'API gulp.src indica Gulp i file da aprire per funzionare con, e tali file vengono quindi inviati in genere a un'altra funzione, anziché la creazione di file temporanei. Questa è la differenza principale con noioso. Nell'esempio seguente vengono illustrati alcuni esempi di base di gulp.src senza il piping dei risultati, cui tratterò a breve. Questa chiamata API accetta ciò che viene definito un glob come parametro. Un esempio glob è fondamentalmente un modello è possibile immettere (più o meno analogo a un'espressione regolare) per, ad esempio, specificare un percorso di uno o più file (ulteriori informazioni su globs in github.com/isaacs/node-glob):

#Tell gulp about some files to work with
gulp.src('./input1.js');
#This will represent every html file in the wwwroot folder
gulp.src('./wwwroot/*.html')
#You can specify multiple expressions
gulp.src(['./app/**/*.js', './app/*.css']

La destinazione (destinazione) API, come si può immaginare, specifica una destinazione e accetta inoltre un glob. Poiché globs sono così flessibili per la definizione di percorsi, è possibile singoli file di output o in una cartella di output:

#Tell dest you'll be using a file as your output
gulp.dest ('./myfile.js');
#Or maybe you'll write out results to a folder
gulp.dest ('./wwwroot');

Attività Gulp sono semplicemente il codice che scritto per eseguire un'operazione. Il formato per l'attività è piuttosto semplice, ma le attività possono essere utilizzate in diversi modi. Il modo più semplice consiste nel chiedere un'attività predefinita e uno o più altre attività:

gulp.task('customtask', function(){
  // Some custom task to ex. read files, add headers, concat
});
gulp.task('default', function () {
  // Some default task that runs when you call gulp with no params
});

Attività possono essere eseguite in parallelo o possono essere interdipendenti. Se non è rilevante l'ordine, è possibile concatenarli solo insieme, come segue:

gulp.task('default', ['concatjs', 'compileLess'], function(){});

Questo esempio definisce l'attività di impostazione predefinita, che non esegue alcuna operazione ma l'esecuzione di attività separati per concatenare i file JavaScript e compilare meno file (supponendo che codice nelle attività denominata qui). Se i requisiti prevedono un'attività viene completato prima che l'altro viene eseguita, è necessario apportare un'attività dipendente da un altro, quindi eseguire più attività. Nel codice seguente, l'attività predefinita attende concat completare in primo luogo, che a sua volta di uglify attende il completamento:

gulp.task('default', ['concat']);
gulp.task('concat', ['uglify'], function(){
  // Concat
});
gulp.task('uglify', function(){
  // Uglify
});

L'API di pipe viene utilizzata per inviare i risultati di una funzione a un altro utilizzando il flusso di Node. js API. Il flusso di lavoro è in genere: lettura src, pipe a un'attività, inviare i risultati nella destinazione. In questo esempio gulpfile.js completo legge tutti i file JavaScript /script, concatenati in un singolo file e scrive l'output in un'altra cartella:

// Define plug-ins – must first run: npm install gulp-concat --save-dev
var gulp = require('gulp');
var concat = require('gulp-concat');
gulp.task('default', function () {
  #Get all .js files in /scripts, pipe to concatenate, and write to folder
  gulp.src('./lib/scripts/*.js')
    .pipe(concat('all-scripts.js'))
    .pipe(gulp.dest('./wwwroot/scripts'));
}

Di seguito è riportato un esempio pratico, reali. Spesso si desidera concatenare i file e/o aggiungere intestazioni informativo a file di codice sorgente. È possibile farlo facilmente in pochi passaggi aggiungendo un paio di file nella directory principale del sito Web (è possibile eseguire questa attività in anche il codice, vedere la documentazione di intestazione gulp). Innanzitutto, creare un file denominato copyright. txt che contiene le intestazioni da aggiungere, simile al seguente:

/*
MyWebSite Version <%= version %>
https://twitter.com/adamtuliper
Copyright 2015, licensing, etc
*/

Successivamente, creare un file denominato Version. txt che contiene il numero di versione corrente (sono disponibili plug-in, quali rilievi gulp e bump noioso, per incrementare i numeri di versione, nonché):

1.0.0

A questo punto, installare il plug-in intestazione gulp e gulp concat nella radice del progetto:

npm install gulp-concat gulp-header --save-dev

In alternativa, puoi manualmente aggiungerli al file package. JSON e lasciare che Visual Studio eseguire il ripristino del pacchetto per l'utente.

Infine, è sufficiente gulpfile.js indicare Gulp operazioni da eseguire, come illustrato nella Figura 3. Se non si desidera concatenare tutti gli script e invece aggiungere intestazioni a ogni file, è possibile semplicemente commento la riga pipe(concat). Semplice, no?

Figura 3 Gulpfile.js

var gulp = require('gulp');
var fs = require('fs');
var concat = require("gulp-concat");
var header = require("gulp-header");
// Read *.js, concat to one file, write headers, output to /processed
gulp.task('concat-header', function () {
  var appVersion = fs.readFileSync('version.txt');
  var copyright =fs.readFileSync('copyright.txt');
  gulp.src('./scripts/*.js')
  .pipe(concat('all-scripts.js'))
  .pipe(header(copyright, {version: appVersion}))
  .pipe(gulp.dest('./scripts/processed'));
});

È quindi sufficiente eseguire l'attività tramite il comando seguente e, gioco, concatenare tutti i file. js, aggiunto un'intestazione personalizzata e scritto l'output nella cartella ./scripts/processed:

gulp concat-header

Task Runner Explorer

Visual Studio fornisce supporto per Gulp e Grunt tramite Task Runner Explorer, che è incluso in Visual Studio 2015 e disponibile come un'estensione di Visual Studio. È possibile trovare nella vista | Altre finestre | Task Runner Explorer. Task Runner Explorer è piuttosto a questo punto, perché verrà rilevato se si dispone di un gulpfile.js o gruntfile. js nel progetto, analizzare le attività e fornire un'interfaccia utente per eseguire le attività vengono trovati, come illustrato nella Figura 4. Inoltre, è possibile definire attività da eseguire quando si verificano azioni predefinite del progetto, che verrà descritta successivamente perché ASP.NET 5 Usa questa funzionalità nei propri modelli predefiniti. Semplicemente fare doppio clic su un'attività per eseguirla o da associare a una particolare azione, ad esempio, eseguire un'attività nel progetto aperto.

Task Runner Explorer che illustra entrambi Grunt e Gulp attività con opzioni
Figura 4 Task Runner Explorer che illustra entrambi Grunt e Gulp attività con opzioni

Come Figura 5 illustrato, noioso fornisce opzioni quando si evidenzia un'attività noioso che non verrà visualizzato con confessano, in particolare la forza (per ignorare gli avvisi) e opzioni Verbose (F e V in alto a sinistra). Si tratta semplicemente i parametri passati alla riga di comando noioso. È l'aspetto interessante di Task Runner Explorer mostra i comandi passa alla riga di comando Grunt e Gulp (nella finestra di output di attività), pertanto non c'è alcun dubbio da cosa accade dietro le quinte.

Opzioni aggiuntive noioso e la riga di comando
Figura 5 opzioni aggiuntive noioso e la riga di comando

Gulp e ASP.NET 5

I modelli ASP.NET 5 inclusi in Visual Studio 2015 utilizzano Gulp e installano Gulp nella cartella node_components del progetto affinché sia tutto pronto per l'utilizzo del progetto. È comunque possibile utilizzare naturalmente; tutto in un progetto ASP.NET 5, è solo necessario ricordarsi di installarlo nel progetto tramite npm o aggiungendolo a packages.json all'interno di devDependencies e lasciare che il pacchetto automatico ripristinare funzionalità in Visual Studio effettuare questa operazione. Desidera sottoporre a stress: È possibile eseguire tutte queste operazioni tramite la riga di comando o all'interno di Visual Studio, il metodo preferito.

In questo modo, i modelli ASP.NET 5 correnti includono un paio di attività da minify per concatenare file CSS e. js. Nelle versioni precedenti di ASP.NET, queste attività sono state gestite nel codice compilato in fase di esecuzione, non è in teoria dove o quando è necessario eseguire questi tipi di attività. Come si può vedere nella Figura 6, le attività di pulizia denominata min chiamare loro css e js metodi per minify i file o per pulire precedentemente minimizzato file.

Attività della casella nei modelli ASP.NET 5 Preview
Figura 6 attività Out-of-the-Box nei modelli ASP.NET 5 Preview

La seguente riga gruntfile. js viene illustrato un altro esempio di eseguire più attività contemporaneamente:

gulp.task("clean", ["clean:js", "clean:css"]);

È possibile associare attività Grunt e Gulp a quattro diverse operazioni in Visual Studio. Con MSBuild, era comune definire una riga di comando pre- e post-compilazione per eseguire varie attività. Con Task Runner Explorer, è possibile definire gli eventi prima di compilare, dopo la compilazione, la pulizia e Apri progetto per eseguire queste attività. In questo modo semplicemente aggiunge commenti al gulpfile.js o file gruntfile. js che non influiscono sull'esecuzione, ma vengono ricercate da Task Runner Explorer. Per visualizzare l'associazione "pulito" in gulpfile.js di ASP.NET 5, esaminiamo la seguente riga nella parte superiore del file:

// <binding Clean='clean' />

Questo è tutto ciò è necessario per associare l'evento.

Avvolgendo

Sia Grunt e Gulp sono eccezionali aggiunte arsenale di Web. Entrambi sono anche supportate e hanno un vasto ecosistema di plug-in disponibili. Ogni progetto Web può trarre vantaggio da un elemento che possono fornire. Per ulteriori informazioni, assicurarsi di controllare le seguenti informazioni:

Adam Tuliper è un senior technical evangelist presso Microsoft che vivono in SoCal soleggiato. È un sviluppo Web, sviluppo di gioco, autore di Pluralsight e tutti gli amanti tech versatile. Trovarlo su Twitter: @AdamTuliper o sul blog di Garage di suo Adam all'indirizzo bit.ly/1NSAYxK.

Grazie all'esperto tecnico Microsoft seguente per la revisione di questo articolo: Michael Palermo