Explication détaillée de Grunt sur la compression de fichiers statiques et le packaging du contrôle de version

Cet article vous apporte principalement un exemple de packaging de compression et de contrôle de version de fichiers statiques par Grunt. L'éditeur le trouve plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence pour tout le monde. Suivons l'éditeur et jetons un œil. J'espère que cela pourra aider tout le monde.

Avant d'en parler, parlons des étapes générales : Installer nodejs -> Installer grunt globalement -> Créer un package.json pour le projet -> plug-in pour le projet -> Configurer Gruntfile.js -> Exécuter la tâche

1 Installer Node

Nous devons installer Nodejs avant. nous commençons, si le portail n'est pas installé

Après l'installation, vérifiez si l'installation est réussie. Normalement, l'invite est comme ceci

<.>

Il est recommandé de remplacer npm par le cnpm de Taobao, la vitesse est impressionnante.

Commande d'installation :

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

2. Installez Global Grunt

Commande d'installation :

cnpm install grunt -g

3.Création de projet package.json

Créé dans le répertoire racine du projet package.json, le contenu du fichier est le suivant

4 Le projet installe les plug-ins grunt et grunt Les plug-ins dont nous avons besoin

Effacer les fichiers et les dossiers tr> corps>

Nom du plug-in

插件名称	说明	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

Description

Adresse Github

grunt-contrib-clean

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

grunt-contrib-copy

Copier des fichiers et des dossiers

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

grunt-contrib-concat

Connecter et fusionner le fichier (non utilisé)

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

grunt-contrib-cssmin

Compression (fichier CSS)

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

grunt-contrib-uglify

Compression (fichier JS)

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

grunt-filerev

Hash du contenu du fichier (MD5) (contrôle du numéro de version)

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

grunt-usemin

Modification de la référence du fichier

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

load-grunt-tasks

oad-grunt-tasks

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

Nous ouvrons notre dossier de projet, entrons cmd dans la barre de chemin et appuyons sur Entrée

L'interface après avoir appuyé sur Entrée

Après avoir ouvert la fenêtre de ligne de commande, nous entrons dans la commande d'installation :

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.Configurer Gruntfile.js (C'est le point, le point, le point. Dites les choses importantes trois fois.)

Je publierai d'abord ma configuration et je l'expliquerai plus tard

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;]);
};

Nous avons installé ceci et cela, mais comment utilisons-nous ces éléments installés ?

Tout d'abord, nous apprenons à utiliser le plug-in en apprenant Getting Started with Grunt. Ceci est un exemple tiré du site officiel.

pkg est un objet json généré en lisant package.json.

uglify est le nom de la tâche spécifié par grunt-contrib-uglify. Chaque plug-in a un nom de la tâche correspondant qui peut être consulté dans le github grunt.loadNpmTasks(

'grunt-contrib-uglify'); Comme vous pouvez le voir d'après le nom/, chargez un plug-in qui peut fournir des tâches "uglify".

grunt.registerTask(

'default', ['uglify']); Enregistrez une tâche d'alias correspond à une liste de tâches
Lors du passage de l'alias grunt, les tâches de la liste sont effectivement exécutées et exécutées dans l'ordre

Ces informations de base peuvent être consultées sur le site officiel.

Parlons de nos besoins. Nous devons empaqueter et compresser des fichiers statiques, et nous devons ajouter des numéros de version aux fichiers statiques. Tous les fichiers HTML ou CSS qui font référence à des fichiers statiques doivent voir leurs noms de fichiers modifiés. soyez clair plus tard. Voyez comment nous procédons.

Première étape : nous devons reconditionner, puis nous devons copier les fichiers, nous avons donc besoin du plug-in grunt-contrib-copy.

Avant de copier, nous devons d'abord déterminer le fichier source et le fichier cible. Les fichiers source ici sont placés dans le dossier test, et les fichiers cibles sont placés dans le dossier dist

.

Nous créons le chemin du fichier

Le chemin du fichier est créé, regardons la copie

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

Vous pouvez le constater d'après les commentaires dans le code. Ici on parle de cwd, src, dest.

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;//目标文件路径前缀。
     }
    ]
   }
  },

En fait, le chemin source ici est cwd + src. C'est le véritable chemin source. dest est le préfixe du chemin de destination.

Ce que je veux dire ici, ce sont tous les fichiers sous src, ce qui signifie copier les fichiers du dossier src dans le dossier dest. Ici, vous pouvez spécifier le dossier ou le type de fichier spécifique qui doit être copié

Étape 2 : Compresser les fichiers ici. Pour la compression img, vous pouvez vérifier les plug-ins correspondants. les idées sont les mêmes.

La compression CSS nécessite le plug-in grunt-contrib-cssmin, et le nom de tâche correspondant du plug-in est cssmin

js la compression nécessite le plug-in grunt -contrib-uglify, la tâche correspondant à ce plug-in est nommée uglify

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;//目标文件路径前缀。
     }
    ]
   }
  },

Étape 3 : Renommer les fichiers statiques. ici, c'est via des fichiers statiques. Le renommage des fichiers est réaliste.

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;//目标文件路径前缀。
     }
    ]
   }
  },

Le renommage nécessite le plug-in grunt-filerev, et le nom de tâche correspondant du plug-in est filerev

Là il n'y a qu'un seul paramètre src ici, ce qui est passé est un tableau, nous voulons seulement renommer css et js ici, d'autres fichiers ne sont pas nécessaires. Par conséquent, le premier paramètre du tableau, src/**, correspond à tous les fichiers du dossier src, et les deux derniers ! xx signifient l'exclusion,

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

Étape 4 : Modifier les références aux css et js en html

Pour modifier les références de fichiers, vous devez utiliser le plug-in grunt-usemin. La tâche correspondant à ce plug-in s'appelle usemin

Il n'y a qu'un seul paramètre src ici, étant donné que c'est l'adresse du html Si vous avez encore du css, vous pouvez l'écrire comme ceci

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

Étape 5 : Nous avons tout couvert, depuis la copie, la compression, le renommage et la modification des références, il manque une chose ici, c'est-à-dire que nous devons supprimer les fichiers du dossier cible avant chaque copie.

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

Pour modifier les références de fichiers, vous devez utiliser le plug-in grunt-contrib-clean. La tâche correspondant à ce plug-in s'appelle clean

Il n'y a qu'un seul paramètre src, donnant l'adresse du dossier cible.

Toutes les tâches sont réglées ici.

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

Nous enregistrons les tâches

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实例详解

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!