Grunts ausführliche Erklärung der statischen Dateikomprimierung und Versionskontrollpaketierung

Dieser Artikel enthält hauptsächlich ein Beispiel für Grunts Komprimierungs- und Versionskontrollpaketierung statischer Dateien. Der Herausgeber findet es ziemlich gut, deshalb werde ich es jetzt mit Ihnen teilen und es allen als Referenz geben. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Bevor ich darüber spreche, lassen Sie uns über die allgemeinen Schritte sprechen: NodeJS installieren -> package.json für das Projekt erstellen -> Plug-in für das Projekt -> Gruntfile.js konfigurieren -> Führen Sie die Aufgabe aus

1. Wir müssen Nodejs installieren Wir starten, wenn das Portal nicht installiert ist

Überprüfen Sie nach der Installation, ob die Installation erfolgreich war

Es wird empfohlen, npm durch Taobaos cnpm zu ersetzen, die Geschwindigkeit ist fantastisch.

Installationsbefehl:

npm install cnpm -g -registry=

https://registry.npm.taobao.org

2. Globales Grunt installieren

Installationsbefehl:

cnpm install grunt -g

3.

Projekterstellungspaket.json Erstellt im Projektstammverzeichnis package.json-Datei, der Inhalt der Datei lautet wie folgt:

4. Das Projekt installiert Grunt- und Grunt-Plug-Ins

Die Plug-ins, die wir brauchen

Dateien und Ordner löschen tr> tbody>

Plug-in-Name

Beschreibung

插件名称	说明	Github地址
grunt-contrib-clean	清空文件和文件夹	https://github.com/gruntjs/grunt-contrib-clean
grunt-contrib-copy	复制文件和文件夹	https://github.com/gruntjs/grunt-contrib-copy
grunt-contrib-concat	连接、合并文件（没用到）	https://github.com/gruntjs/grunt-contrib-concat
grunt-contrib-cssmin	（CSS文件）压缩	https://github.com/gruntjs/grunt-contrib-cssmin
grunt-contrib-uglify	（JS文件）压缩	https://github.com/gruntjs/grunt-contrib-uglify
grunt-filerev	文件内容hash（MD5）（版本号控制）	https://github.com/yeoman/grunt-filerev
grunt-usemin	文件进行引用修改	https://github.com/yeoman/grunt-usemin
load-grunt-tasks	oad-grunt-tasks	https://github.com/sindresorhus/load-grunt-tasks

Github-Adresse

grunt-contrib-clean

https://github.com/gruntjs/grunt-contrib-clean

grunt-contrib-copy

Dateien und Ordner kopieren

https://github.com/gruntjs/grunt-contrib-copy

grunt-contrib-concat

Datei verbinden und zusammenführen (nicht verwendet)

https://github.com/gruntjs/grunt-contrib-concat

grunt-contrib-cssmin

Komprimierung (CSS-Datei)

https://github.com/gruntjs/grunt-contrib-cssmin

grunt-contrib-uglify

(JS-Datei)-Komprimierung

https://github.com/gruntjs/grunt-contrib-uglify

grunt-filerev

Dateiinhalts-Hash (MD5) (Versionsnummernkontrolle)

https://github.com/yeoman/grunt-filerev

grunt-usemin

Dateireferenzänderung

https://github.com/yeoman/grunt-usemin

load-grunt-tasks

oad-grunt-tasks

https://github.com/sindresorhus/load-grunt-tasks

Wir öffnen unseren Projektordner, geben cmd in die Pfadleiste ein und drücken die Eingabetaste

Die Oberfläche nach dem Drücken der Eingabetaste

Nachdem wir das Befehlszeilenfenster geöffnet haben, geben wir den Installationsbefehl ein:

cnpm install grunt grunt-contrib-clean grunt-contrib-copy grunt-contrib-concat grunt-contrib-cssmin grunt- contrib-uglify grunt-filerev grunt-usemin load-grunt-tasks --save-dev

5.Gruntfile.js konfigurieren (Das ist der Punkt, der Punkt, der Punkt. Sagen Sie wichtige Dinge dreimal.)

Ich werde meine Konfiguration zuerst veröffentlichen und sie später erklären

module.exports = function (grunt) {
 require('load-grunt-tasks')(grunt);

 var path = {
  src : 'test',
  dest : 'dist',
 }

 grunt.initConfig({
  path : path,
  clean : {//清空生产文件夹
   beforebuild : {
    files : [{
      src : [&#39;<%= path.dest %>/&#39;]
     }
    ]
   }
  },
  filerev : {//对css和js文件重命名
   build : {
    files : [{
      src : [&#39;<%= path.dest %>/**&#39;,
      &#39;!<%= path.dest %>/page/*.html&#39;,//html文件不加版本号
      &#39;!<%= path.dest %>/**/*.{png,jpg,jpeg}&#39;]//图片 不需要加版本号
     }
    ]
   }
  },
  useminPrepare : {//声明concat、cssmin、uglify
   build : {
    files : [{
      src : &#39;<%= path.src %>/page/*.html&#39;
     }
    ],

   }
  },
  usemin : {//修改html中的css和js引用
   html : {
    files : [{
      src : &#39;<%= path.dest %>/page/*.html&#39;
     }
    ]
   }
  },
  copy : {//复制文件
   build : {
    files : [{
      expand : true,//为true启用cwd,src,dest选项
      cwd : &#39;<%= path.src %>/&#39;,//所有src指定的匹配都将相对于此处指定的路径（但不包括此路径）
      src : [&#39;**/*.*&#39;],//相对于cwd路径的匹配模式。意思就是 src/**/*.*，匹配src下面所有文件
      dest : &#39;<%= path.dest %>/&#39;//目标文件路径前缀。
     }
    ]
   }
  },
  cssmin :{
   build : {
    files : [{
      expand : true,//为true启用cwd,src,dest选项
      cwd : &#39;<%= path.src %>/&#39;,//所有src指定的匹配都将相对于此处指定的路径（但不包括此路径）
      src : [&#39;css/*.css&#39;],//相对于cwd路径的匹配模式。意思就是 src/**/*.css，匹配src下面所有css文件
      dest : &#39;<%= path.dest %>/&#39;//目标文件路径前缀。
     }
    ]
   }
  },
  uglify :{
   build : {
    files : [{
      expand : true,//为true启用cwd,src,dest选项
      cwd : &#39;<%= path.src %>/&#39;,//所有src指定的匹配都将相对于此处指定的路径（但不包括此路径）
      src : [&#39;js/*.js&#39;],//相对于cwd路径的匹配模式。意思就是 src/**/*.js，匹配src下面所有js文件
      dest : &#39;<%= path.dest %>/&#39;//目标文件路径前缀。
     }
    ]
   }
  },
 });
 grunt.registerTask(&#39;default&#39;, [&#39;clean:beforebuild&#39;, &#39;copy&#39;, &#39;cssmin&#39;, &#39;uglify&#39;,&#39;filerev&#39;, &#39;usemin&#39;]);
};

Wir haben dies und das installiert, aber wie nutzen wir diese installierten Dinge?

Zuerst lernen wir, wie man das Plug-in verwendet, indem wir Erste Schritte mit Grunt lernen. Dies ist ein Beispiel von der offiziellen Website.

pkg ist ein JSON-Objekt, das durch Lesen von package.json generiert wird.

uglify ist der von grunt-contrib-uglify angegebene Aufgabenname. Jedes Plug-in hat einen entsprechenden Aufgabennamen, der im entsprechenden Github angezeigt werden kann

grunt.loadNpmTasks(

'grunt-contrib-uglify'); Wie Sie am Namen erkennen können, laden Sie ein Plug-in, das „uglify“-Aufgaben bereitstellen kann.

grunt.registerTask('default', ['uglify']); Diese Alias-Aufgabe entspricht einer Aufgabenliste

Beim Übergeben des Grunt-Alias ​​werden die Aufgaben in der Liste tatsächlich und in der angegebenen Reihenfolge ausgeführt

Diese grundlegenden Informationen können auf der offiziellen Website eingesehen werden.

Lassen Sie uns über unsere Anforderungen sprechen. Wir müssen statische Dateien mit Versionsnummern versehen. Die Dateinamen aller HTML- oder CSS-Dateien müssen entsprechend unseren Anforderungen geändert werden Seien Sie später klar. Sehen Sie, wie wir es machen.

Schritt eins: Wir müssen neu packen, dann müssen wir die Dateien kopieren, also brauchen wir das Grunt-Contrib-Copy-Plug-In.

Vor dem Kopieren müssen wir zunächst die Quelldatei und die Zieldatei ermitteln. Die Quelldateien werden hier im Testordner und die Zieldateien im dist-Ordner abgelegt

Wir erstellen den Dateipfad

var path = {
  src : 'test',
  dest : 'dist',
 }

Der Dateipfad ist erstellt, schauen wir uns die Kopie an

copy : {//复制文件
   build : {
    files : [{
      expand : true,//为true启用cwd,src,dest选项
      cwd : &#39;<%= path.src %>/&#39;,//所有src指定的匹配都将相对于此处指定的路径（但不包括此路径）
      src : [&#39;**/*.*&#39;],//相对于cwd路径的匹配模式。意思就是 src/**/*.*，匹配src下面所有文件
      dest : &#39;<%= path.dest %>/&#39;//目标文件路径前缀。
     }
    ]
   }
  },

Das erkennt man an den Kommentaren im Code. Hier sprechen wir über cwd, src, dest.

Eigentlich ist der Quellpfad hier cwd + src. Dies ist der eigentliche Quellpfad. dest ist das Zielpfadpräfix.

Was ich hier meine, sind alle Dateien unter src, was bedeutet, dass die Dateien im Ordner src in den Ordner dest kopiert werden. Hier können Sie den spezifischen Ordner oder Dateityp angeben, der kopiert werden soll

Schritt 2: Ich komprimiere hier nur js und css, Sie können die entsprechenden Plug-Ins überprüfen die Ideen sind die gleichen.

Für die CSS-Komprimierung ist das Plug-In grunt-contrib-cssmin erforderlich, und der entsprechende Aufgabenname des Plug-Ins lautet cssmin

cssmin :{
   build : {
    files : [{
      expand : true,//为true启用cwd,src,dest选项
      cwd : &#39;<%= path.src %>/&#39;,//所有src指定的匹配都将相对于此处指定的路径（但不包括此路径）
      src : [&#39;css/*.css&#39;],//相对于cwd路径的匹配模式。意思就是 src/**/*.css，匹配src下面所有文件
      dest : &#39;<%= path.dest %>/&#39;//目标文件路径前缀。
     }
    ]
   }
  },

js Für die Komprimierung ist das Plug-in grunt -contrib-uglify erforderlich. Die diesem Plug-in entsprechende Aufgabe heißt uglify

uglify :{
   build : {
    files : [{
      expand : true,//为true启用cwd,src,dest选项
      cwd : &#39;<%= path.src %>/&#39;,//所有src指定的匹配都将相对于此处指定的路径（但不包括此路径）
      src : [&#39;js/*.js&#39;],//相对于cwd路径的匹配模式。意思就是 src/**/*.js，匹配src下面所有文件
      dest : &#39;<%= path.dest %>/&#39;//目标文件路径前缀。
     }
    ]
   }
  },

Schritt 3: Benennen Sie statische Dateien um. Unsere Versionskontrolle Hier ist das Umbenennen von Dateien durch statische Dateien realistisch.

Für das Umbenennen ist das Plug-in grunt-filerev erforderlich, und der entsprechende Aufgabenname des Plug-ins lautet filerev

filerev : {//对css和js文件重命名
   build : {
    files : [{
      src : [&#39;<%= path.dest %>/**&#39;,
      &#39;!<%= path.dest %>/page/*.html&#39;,//html文件不加版本号
      &#39;!<%= path.dest %>/**/*.{png,jpg,jpeg}&#39;]//图片 不需要加版本号
     }
    ]
   }
  },

Da Hier gibt es nur einen src-Parameter. Was übergeben wird, ist ein Array. Wir möchten hier nur CSS und JS umbenennen, andere Dateien werden nicht benötigt. Daher stimmt der erste Parameter des Arrays, src/**, mit allen Dateien im Ordner src überein, und die letzten beiden xx bedeuten Ausschluss,

Schritt 4: Ändern Sie die Verweise auf CSS und JS in HTML

Um Dateiverweise zu ändern, müssen Sie das grunt-usemin-Plugin verwenden. Die diesem Plug-in entsprechende Aufgabe heißt usemin

usemin : {//修改html中的css和js引用
   html : {
    files : [{
      src : &#39;<%= path.dest %>/page/*.html&#39;
     }
    ]
   }
  },

Es gibt hier nur einen src-Parameter, vorausgesetzt, es handelt sich um die Adresse von HTML. Wenn Sie noch CSS haben, können Sie es so schreiben:

usemin : {//修改html中的css和js引用
   html : {
    files : [{
      src : &#39;<%= path.dest %>/page/*.html&#39;
     }
    ]
   },
   css :{
    files : [{
      src : &#39;<%= path.dest %>/css/*.css&#39;
     }
    ]
   }
  },

Schritt 5: Wir haben alles vom Kopieren, Komprimieren, Umbenennen und Ändern von Referenzen abgedeckt. Hier fehlt eines: Wir müssen die Dateien im Zielordner vor jedem Kopieren löschen.

Um Dateiverweise zu ändern, müssen Sie das Plug-in grunt-contrib-clean verwenden. Die diesem Plug-in entsprechende Aufgabe heißt clean

clean : {//清空生产文件夹
   beforebuild : {
    files : [{
      src : [&#39;<%= path.dest %>/&#39;]
     }
    ]
   }
  },

Hier gibt es nur einen src-Parameter, der die Adresse des Zielordners angibt.

Alle Aufgaben werden hier erledigt.

Wir melden Aufgaben an

grunt.registerTask('default', ['clean:beforebuild', 'copy', 'cssmin', 'uglify','filerev', 'usemin']);

可以看到，我们这里只是注册了任务，并没有应用插件。我们添加插件是听过 load-grunt-tasks 插件完成的

require('load-grunt-tasks')(grunt);

这里指令相当于我们一个个写

grunt.loadNpmTasks('xxx');

Gruntfile.js 配置完了之后我们执行grunt命令就可以在目标文件夹中得到我们所需要的文件

这里补充说明几点：

Gruntfile.js 配置完了之后我们执行grunt命令就可以在目标文件夹中得到我们所需要的文件

这里补充说明几点：

这种写法是动态构建文件对象

这种写法是文件数组格式 

相关推荐：

什么是Grunt？对他的详细介绍

关于Grunt压缩CSS和HTML的实例交汇处能

Grunt压缩图片和JS实例详解

Das obige ist der detaillierte Inhalt vonGrunts ausführliche Erklärung der statischen Dateikomprimierung und Versionskontrollpaketierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!