Ausführliche Erläuterung der Gulp-Installation sowie der Verpackung und Zusammenführung

Dieser Artikel führt Sie hauptsächlich in das Tutorial zum Implementieren einer Verpackungs- und Zusammenführungsmethode in gulp ein und teilt die Lösung für die Reihenfolge, in der gulp js/css verpackt und in einer Datei zusammenführt Sie benötigen den Beispielcode. Freunde können sich darauf beziehen und dem Editor folgen, um gemeinsam zu lernen. Ich hoffe, es hilft allen.

Vorwort

gulp ist ein Tool zum Erstellen von Code im Front-End-Entwicklungsprozess. Es ist ein Tool zum Erstellen von Automatisierungsprojekten. Es kann nicht nur Website-Ressourcen optimieren, sondern auch viele Wiederholungen eliminieren Aufgaben während des Entwicklungsprozesses können mit den richtigen Tools automatisch erledigt werden. Mit ihr können wir nicht nur problemlos Code schreiben, sondern auch unsere Arbeitseffizienz erheblich verbessern.

Installation, Paketierung und Zusammenführung

1. Installieren Sie node.js Download-Adresse: http://nodejs.cn/

Öffnen Sie die Befehlszeile von node.js und geben Sie Folgendes ein: node - v , wenn eine Versionsnummer vorhanden ist, ist sie korrekt installiert.

2. Taobao-Image installieren: Befehlszeileneingabe:

npm install -g cnpm --registry=http://registry.npm.taobao.org

Zweck: Um den Download zu beschleunigen.

3. Gulp global installieren

cnpm install --global gulp

4. Erstellen Sie ein Verzeichnis, öffnen Sie das Laufwerk F und erstellen Sie einen Gulp-Ordner.

Befehlszeileneingabe:

f:

cd gulp

5. Lokales gulp installieren

cnpm install --save-dev gulp

6. Paket.json-Datei erstellen

cnpm init

alle Übrigens: Zum Bestätigen einfach eingeben

7. Öffnen Sie dieses Gulp-Verzeichnis in einem Webeditor, z. B. Hbuilder und Webstorm.

Erstellen Sie die Datei gulpfile.js im gulp-Verzeichnis, dem Einstiegspunkt für die Ausführung von gulp

8. Bestimmen Sie die Art der Verpackung und Komprimierung , html, js, css, img

9.js-Verpackung

var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
 
gulp.task('default',function(){ 
 gulp.src('js/*.js') // 路径问题：gulpfile.js为路径的起点。此路径表示js文件下的所有js文件。
 .pipe(concat('all.js')) //合并成的js文件名称
 .pipe(uglify()) //压缩
 .pipe(gulp.dest('build')); //打包压缩在build目录下。
});

10 ein Fehler mit der Aufforderung „gulp-“ Die Concat-Komponente ist nicht installiert. Starten Sie die Installation: cnpm install gulp-concat --save-dev

Erneut ausführen: gulp

Es wird erneut ein Fehler gemeldet, der darauf hinweist, dass die gulp-uglify-Komponente nicht installiert ist. Starten Sie die Installation: cnpm install gulp-uglify --save-dev

Erneut ausführen: gulp

. . . . . . . . . . . . . . .

Nach Erfolg sehen Sie

hier sehen Sie fertig „default“, „default“ ist der Standardeintrag zum Starten der gulp.task-Aufgabe . Wenn Sie mehrere Aufgaben erstellen und den Aufgabennamen ändern, z. B.:

erneut ausführen: gulp

Ergebnis:

var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
 
gulp.task('default',function(){ 
 gulp.src('js/*.js') // 路径问题：gulpfile.js为路径的起点。此路径表示js文件下的所有js文件。
 .pipe(concat('all.js')) //合并成的js文件名称
 .pipe(uglify()) //压缩
 .pipe(gulp.dest('build')); //打包压缩在build目录下。
})
 
//css 打包压缩
var autoprefix = require('gulp-autoprefixer');
var minifyCSS = require('gulp-minify-css');
 
　　gulp.task('style', function() { //task 任务名称为style
 
　　gulp.src('.css/*.css')
 
　　.pipe(concat('styles.css'))
 
　　.pipe(autoprefix('last 2 versions'))
 
　　.pipe(minifyCSS())
 
　　.pipe(gulp.dest('styles'));
 
　　});

OK Es wurde festgestellt, dass nur die Standardaufgabe ausgeführt wurde. Weil dies der einzige Standardeintrag für die Gulp-Ausführung ist.

Ändern Sie es wie folgt

Wenn Sie auf eine Komponente stoßen, die nicht installiert ist, sollten Sie meiner Meinung nach wissen, wie man sie bedient.

11. Bildkomprimierung

var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
 
gulp.task('js',function(){ 
 gulp.src('js/*.js') // 路径问题：gulpfile.js为路径的起点。此路径表示js文件下的所有js文件。
 .pipe(concat('all.js')) //合并成的js文件名称
 .pipe(uglify()) //压缩
 .pipe(gulp.dest('build')); //打包压缩在build目录下。
})
 
//css 打包压缩
var autoprefix = require('gulp-autoprefixer');
var minifyCSS = require('gulp-minify-css');
 
　　gulp.task('style', function() { //task 任务名称为style
 
　　gulp.src('.css/*.css')
 
　　.pipe(concat('styles.css'))
 
　　.pipe(autoprefix('last 2 versions'))
 
　　.pipe(minifyCSS())
 
　　.pipe(gulp.dest('styles'));
 
　　});

<br>gulp.task('default',function(){
 gulp.run(['js','style']); //这里开始执行多个task任务
});

12.html-Komprimierung

var imagemin = require('gulp-imagemin');
gulp.task('img', function() {
 return gulp.src('imgs/*.png')
 .pipe(imagemin())
 .pipe(gulp.dest('miniImg'));
});

13. Ändern Sie das Pfadproblem selbst

Wenn gulp js verpackt /css Auflösen der Reihenfolge beim Zusammenführen in eine Datei

var htmlmin = require('gulp-htmlmin');
gulp.task('html', function() {
 return gulp.src('../*.html')
 .pipe(htmlmin({collapseWhitespace: true}))
 .pipe(gulp.dest('../'));
});

1. Sie können insert gulp-order verwenden.

2. Es kann so geschrieben werden:

Verwandte Empfehlungen:

return gulp.src(['js/common.js','js/**/*.js'])
.pipe(concat('build.js'))//合成到一个js
.pipe(gulp.dest(buildBasePath+'js'))//输出到js目录
.pipe(uglify())//压缩js到一行
.pipe(concat('build.min.js'))//压缩后的js
.pipe(gulp.dest(buildBasePath+'js'));//输出到js目录

Gulp-Implementierung der statischen Webseiten-Modularisierungsbeispielfreigabe

Detaillierte Erläuterung von NodeJS zur Implementierung einer einfachen Gulp-Verpackung

So verwenden Sie Gulp, um Dateikomprimierung und Browser-Hot-Loading zu erreichen

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Gulp-Installation sowie der Verpackung und Zusammenführung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!