Schluck und globale Variablen in einer Funktion von DOM-Selektor gesetzt

Question

Immer noch JavaScript für einige Wochen zu lernen, versuche ich zu globalen Bereichsvariablen zu verstehen, und wie Sie sie innerhalb einer Funktion definieren, um sie global zu verwenden.

Zuerst ist hier mein gulfile Beispiel:

"use strict"; 

var gulp = require('gulp'), 
    rename = require("gulp-rename"), 
    pug = require('gulp-pug'), 
    puglint = require('gulp-pug-lint'), 
    dom = require('gulp-dom'), 
    projectName, // Trying to declare a yet undefined global variable (don't know if its the right way) 
    PATH = { 
    HTML: { 
     NAME: projectName + '.html', // This PATH won't be used before the variable value will be set 
     SRC: 'dev/main.pug', 
     DEST: 'dist/' 
    } 
    }; 

// Compile html from pug and set the html title to a global variable 
gulp.task('html', function() { 
    return gulp.src(PATH.HTML.SRC) 
    .pipe(puglint()) 
    .pipe(pug({ 
     pretty: true 
    })) 
    .pipe(dom(function() { 
     projectName = this.getElementsByTagName("title")[0].innerHTML; // Trying to set the variable's value at a global scope, but doesn't work... 
     return this; 
    })) 
    .pipe(rename(PATH.HTML.NAME)) 
    .pipe(gulp.dest(PATH.HTML.DEST)); 
}); 

Also, was ich versuche zu tun, ist es, den „Titel“ innerHTML- meine bearbeiteten Datei zu erhalten und es zu einem globalen Variablen zuweisen, um es verwendbar in anderen Funktionen. Aber alles, was es zurückgibt, ist "undefiniert". Denken , dass es wahrscheinlich wegen einer Verarbeitungsbestell Problem habe ich versucht, so zu meinem Umbenennungs Rohr, das zu ändern:

... 
.pipe(rename(projectName + '.html')) 
... 

Aber selbst dann gibt es noch undefined (so gibt dann eine Datei namens „undefined.html“) .

Ich weiß nicht, ob das Problem von der Variablen selbst kommt, oder vielleicht ist es meine Aufforderung für getElementsByTagName("title")[0].innerHTML, die nicht richtig eingestellt ist und zurückgibt.

Kann jemand helfen? Vielen Dank im Voraus.

Answer 1

Hier ist das Problem, dass Sie Ihre dom Funktion auf eine pug Datei ausführen. gulp dom Funktion sollte auf einer HTML Datei ausgeführt werden.

Bevor Sie Ihre .pug Datei in eine HTML Datei konvertieren, leiten Sie die dom Funktion.

Fügen Sie eine weitere gulp Aufgabe hinzu, um die dom Funktion nach der pug Dateikonvertierung auszuführen. Auf diese Weise erhalten Sie nicht den undefined Wert.

Eine Beispielimplementierung sollte wie folgt aussehen.

gulp.task('dom', function() { 
    return gulp.src('./src/index.html') 
     .pipe(dom(function(){ 
      return this.querySelectorAll('body')[0].setAttribute('data-version', '1.0'); 
     })) 
     .pipe(gulp.dest('./public/')); 
}); 

Lesen Sie mehr über die dom Funktion hier.
https://www.npmjs.com/package/gulp-dom