Was Sie wissen müssen, um mit Gulp zu beginnen

Dieses Mal bringe ich Ihnen, was Sie wissen müssen, um mit Gulp zu beginnen und was Sie wissen müssen, wenn Sie Gulp verwenden. Welche Vorsichtsmaßnahmen gibt es? Hier sind praktische Fälle, schauen wir uns das an.

1. Gulp global installieren
1. Der Zweck der globalen Installation von gulp besteht darin, gulp-Aufgaben über sie auszuführen.

install gulp -g

3. Überprüfen Sie, ob es korrekt installiert ist: Führen Sie

gulp -v

an der Eingabeaufforderung aus erscheint, bedeutet dies, dass es korrekt installiert ist.

2. Gulp im Projekt installieren

npm install --save-dev gulp

– Hinweis: Bei der globalen Installation von gulp werden Gulp-Aufgaben ausgeführt, bei der lokalen Installation von gulp um die Funktion des Gulp-Plug-Ins aufzurufen.

3. Installieren Sie ein bestimmtes Modul von gulp (nehmen Sie gulp-less als Beispiel, kompilieren Sie die Less-Datei)

npm install gulp-less --save-dev

4. Erstellen Sie eine neue package.json-Datei

npm init

Geben Sie die Projektinformationen entsprechend den Eingabeaufforderungen ein.

5. Erstellen Sie eine neue gulpfile.js-Datei im Projektstammverzeichnis. gulpfile.js ist die
Konfigurationsdatei des gulp-Projekts. Es handelt sich um eine gewöhnliche js-Datei, die sich im Projektstammverzeichnis befindet Legen Sie tatsächlich gulpfile.js in einen anderen Ordner ab. Das Dateibeispiel lautet wie folgt:

//导入工具包 require('node_modules里对应模块')var gulp = require('gulp'), //本地安装gulp所用到的地方
    less = require('gulp-less');//定义一个testLess任务（自定义任务名称）gulp.task('testLess', function () {
    gulp.src('src/less/index.less') //该任务针对的文件
        .pipe(less()) //该任务调用的模块
        .pipe(gulp.dest('src/css')); //将会在src/css下生成index.css});

gulp.task('default',['testLess', 'elseTask']); //Definieren Sie die Standardaufgabe elseTask wie andere Aufgaben. //gulp.task(name[, deps], fn) definiert den Aufgabennamen: Aufgabenname deps: abhängiger Aufgabenname fn:

Callback-Funktion//gulp.src(globs[, Optionen]) Von Ausführungsaufgaben verarbeitete Dateien globs: Verarbeiteter Dateipfad (String oder String-Array) //gulp.dest(path[, Optionen]) Nach der Verarbeitung wird der Dateipfad
6. Optionales cnpm

1. Hinweis: Da das npm-Installations-Plug-in von einem fremden Server heruntergeladen wird, wird es stark vom Netzwerk beeinflusst und kann zu Anomalien führen Der NPM-Server befand sich in China, also hat das Taobao-Team, das wir gerne teilen, dies getan. Von der offiziellen Website: „Dies ist ein vollständiger npmjs.org-Spiegel. Sie können diesen anstelle der offiziellen Version (schreibgeschützt) verwenden. Die Synchronisierungsfrequenz beträgt derzeit alle 10 Minuten, um sicherzustellen, dass sie mit dem offiziellen Dienst synchronisiert ist.“ wie möglich.";

2. Offizielle Website: http://npm.taobao.org;
3. Installation: Eingabeaufforderung zum Ausführen von npm install cnpm -g --registry=
https://
registry.npm.taobao.org ; Hinweis: Überprüfen Sie nach der Installation am besten die Versionsnummer cnpm -v oder schließen Sie die Eingabeaufforderung und öffnen Sie sie erneut. Wenn Sie sie direkt nach der Installation verwenden, können Fehler auftreten ; Hinweis: Die Verwendung von cnpm ist genau die gleiche wie von npm, nur wenn der Befehl „Change npm to cnpm“ ausgeführt wird.

Ich glaube, Sie haben die Methode beherrscht, nachdem Sie den Fall in diesem Artikel gelesen haben Informationen, bitte beachten Sie andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So implementieren Sie eine Knotenverbindung zu MySQL

Reguläre JS-Ausdrücke

Verwendung von

Das obige ist der detaillierte Inhalt vonWas Sie wissen müssen, um mit Gulp zu beginnen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!