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

Ö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

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

Editor

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

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:

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:

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.:

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

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

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:

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

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!