Die ausführlichste Erklärung der Gulp-Installation + Verpackung + Zusammenführung

Dieses Mal werde ich Ihnen die ausführlichste Erklärung zur Gulp-Installation + Verpackung + Zusammenführung geben sind die tatsächlichen Fälle, werfen wir einen Blick darauf.
Vorwort

Gulp ist ein Tool zum Erstellen von Code im Front-End-Entwicklungsprozess und ein Tool zum Erstellen automatisierter Projekte. Es kann nicht nur Website-Ressourcen optimieren, sondern viele sich wiederholende 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, Verpackung 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: . Wenn eine Versionsnummer vorhanden ist, ist sie korrekt installiert.

2. Taobao-Image installieren: Befehlszeileneingabe: node  -v

Zweck: Den nächsten Schritt schneller machen.

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

3. Gulp global installieren

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

cnpm install --global gulp

Befehlszeileneingabe:

5. Lokales Gulp installieren

f:
cd gulp

6. Erstellen Sie die package.json-Datei

cnpm install --save-dev gulp

Geben Sie einfach ganz ein

cnpm init

7.web

Editor

Öffnen Sie dieses Gulp-Verzeichnis, z. B. hbuilder, webstorm.

Erstellen Sie die gulpfile.js-Datei im gulp-Verzeichnis

8. Bestimmen Sie, welche Art von Verpackung und Komprimierung, HTML, JS, CSS, IMG

9.js-Verpackung

10. Führen Sie die Eingabe von node.js aus

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目录下。
});

schluck Es wird eine Fehlermeldung angezeigt, die darauf hinweist, dass die gulp-concat-Komponente nicht installiert ist. Installation starten:

Noch einmal ausführen: Schluck

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

Noch einmal ausführen: Schluck

cnpm install gulp-uglify --save-dev Hier sehen Sie fertiges „default“, „default“ ist der Standardeintrag zum Starten der gulp.task-Aufgabe. Wenn Sie mehrere Aufgaben erstellen und den Aufgabennamen ändern, z. B.:

Wiederholung: Schluck

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'))
   .ipe(autoprefix('last 2 versions'))
  .pipe(minifyCSS())
  .pipe(gulp.dest('styles'))
  });

Sie werden feststellen, dass nur die Standardaufgabe ausgeführt wird. Weil dies der einzige Standardeintrag für die Gulp-Ausführung ist.

Geändert wie folgt

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

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任务
});

11. Bildkomprimierung

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

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

Lösung für die Reihenfolge, wenn gulp js/css packt und in einer Datei zusammenführt

1. Zum Einfügen können Sie gulp-order verwenden.

2. Sie können es so schreiben:

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website !

Empfohlene Lektüre:

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目录

So implementieren Sie das automatische Laden von Bildern mit js und jquery (mit Code)

Anleitung Vue2.0-Benutzerberechtigungen ausführen

Das obige ist der detaillierte Inhalt vonDie ausführlichste Erklärung der Gulp-Installation + Verpackung + Zusammenführung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!