gulp Zelfstudie
Aan de slag met slok

Opmerkingen

versies

Installatie of instellingen

1. Installeer Node.js en NPM:

Gulp vereist Node.js en NPM, de pakketbeheerder van Node. De meeste installatieprogramma's omvatten NPM met Node.js. Raadpleeg de installatiedocumentatie of bevestig dat deze al is geïnstalleerd door de volgende opdracht in uw terminal uit te voeren,

npm -v
// will return NPM version or error saying command not found

2. Installeer gulp wereldwijd:

Als u eerder een wereldwijde versie van gulp hebt geïnstalleerd, voert u npm rm --global gulp om te controleren of uw oude versie niet botst met gulp-cli .

$ npm install --global gulp-cli

3. Initialiseer uw projectmap:

$ npm init

4. Installeer gulp in uw project devDependencies:

$ npm install --save-dev gulp

5. Maak een gulpfile.js in de hoofdmap van uw project:

var gulp = require('gulp');

gulp.task('default', function() {
  // place code for your default task here
});

6. Voer gulp uit:

$ gulp

De standaardtaak wordt uitgevoerd en doet niets.

Gebruik gulp <task> <othertask> om afzonderlijke taken uit te voeren.

Taakafhankelijkheid

U kunt taken in serie uitvoeren door een tweede parameter door te gulp.task() aan gulp.task() .

Deze parameter is een reeks taken die moeten worden uitgevoerd en voltooid voordat uw taak wordt uitgevoerd:

var gulp = require('gulp');

gulp.task('one', function() {
   // compile sass css
});

gulp.task('two', function() {
   // compile coffeescript
});

// task three will execute only after tasks one and two have been completed
// note that task one and two run in parallel and order is not guaranteed
gulp.task('three', ['one', 'two'], function() {
   // concat css and js
});

// task four will execute only after task three is completed
gulp.task('four', ['three'], function() {
   // save bundle to dist folder
});

U kunt de functie ook weglaten als u alleen een bundel afhankelijkheidstaken wilt uitvoeren:

gulp.task('build', ['array', 'of', 'task', 'names']);

Opmerking: de taken worden parallel (allemaal tegelijk) uitgevoerd, dus ga er niet vanuit dat de taken in volgorde beginnen / eindigen. Start gulp v4 , gulp.series() moet worden gebruikt als de volgorde van uitvoering van afhankelijkheidstaken belangrijk is.

Concat js-bestand in submap met behulp van gulp

var gulp = require('gulp'); 

// include plug-ins
var uglify = require('gulp-uglify'),
    concat = require('gulp-concat');

// Minified file
gulp.task('packjsMin', function() {
   return gulp.src('node_modules/angular/*.js')
      .pipe(concat('script.js'))
      .pipe(uglify())
      .pipe(gulp.dest('Scripts'));
});

//Not minified file
gulp.task('packjs', function () {
    return gulp.src('node_modules/angular/*.js')
      .pipe(concat('allPackages.js'))
      .pipe(gulp.dest('Scripts'));
});

gulp CLI docs

vlaggen

gulp heeft heel weinig vlaggen om van te weten. Alle andere vlaggen zijn voor taken die indien nodig kunnen worden gebruikt.

• -v of --version toont de globale en lokale versies van de slokken
• --require <module path> vereist een module voordat het gulpbestand wordt uitgevoerd. Dit is handig voor transpilers maar heeft ook andere toepassingen. U kunt meerdere gebruiken --require vlaggen
• --gulpfile <gulpfile path> stelt handmatig het pad van gulpfile in. Handig als je meerdere gulpbestanden hebt. Hiermee wordt de CWD ook ingesteld op de map gulpfile
• --cwd <dir path> zal de CWD handmatig instellen. De zoektocht naar de gulpfile, evenals de relativiteit van alles wat nodig is, zal vanaf hier zijn
• -T of --tasks toont de taakafhankelijkheidsstructuur voor het geladen gulpbestand
• --tasks-simple toont een platte lijst met taken voor het geladen gulpbestand
• --color zal gulp en gulp plug-ins dwingen om kleuren weer te geven, zelfs wanneer geen kleurondersteuning wordt gedetecteerd
• --no-color zorgt ervoor dat gulp en gulp plug-ins geen kleuren weergeven, zelfs wanneer kleurondersteuning wordt gedetecteerd
• --silent schakelt alle --silent uit

De CLI voegt process.env.INIT_CWD toe, de oorspronkelijke cwd waarmee het is gestart.

Taakspecifieke vlaggen

Raadpleeg deze StackOverflow- link voor het toevoegen van taakspecifieke vlaggen

taken

Taken kunnen worden uitgevoerd door gulp <task> <othertask> . Als u alleen gulp uitvoert, wordt de taak uitgevoerd die u default hebt geregistreerd. Als er geen default taak is, zal gulp fouten maken.

compilers

U vindt een lijst met ondersteunde talen op interpret . Als je ondersteuning voor een nieuwe taal wilt toevoegen, stuur dan hier een verzoek / open problemen.