Grunt による静的ファイル圧縮とバージョン管理パッケージの詳細な説明

この記事では主に、Grunt による静的ファイルの圧縮とバージョン管理のパッケージ化の例を紹介します。編集者はこれが非常に良いものだと思ったので、皆さんの参考として今から共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

それについて説明する前に、一般的な手順について説明します。 nodejs をインストールする -> grunt をグローバルにインストールする -> プロジェクトを作成する package.json -> Gruntfile.js を設定する - > タスクを実行します

1. ノードをインストールします

インストールされていない場合は、インストールが成功したかどうかを確認する必要があります。このように

npmをタオバオのcnpmに置き換えることをお勧めします。cnpmはより高速です。

インストールコマンド:

npm install cnpm -g -registry=

https://registry.npm.taabao.org

2. グローバルGruntをインストールします

インストールコマンド:

cnpm install grunt -g

3.プロジェクト作成package.json

プロジェクトのルートディレクトリにpackage.jsonファイルを作成します ファイルの内容は以下の通りです

。 4. プロジェクトのインストール grunt と grunt プラグイン

必要なプラグイン

プラグイン名空のファイルとフォルダー https://github.com/gruntjs/grunt-contrib-cleangrunt-contrib-copyファイルとフォルダーをコピーhttps://github.com/gruntjs/ grunt-contrib-copygrunt-contrib-concat ファイルを接続してマージします (未使用)https://github.com/gruntjs/grunt-contrib-concatgrunt-contrib-cssmin (CSS ファイル) 圧縮https://github.com/gruntjs/grunt-contrib-cssmingrunt-contrib-uglify(JS ファイル) 圧縮https://github.com/ gruntjs/grunt-contrib-uglifygrunt-filerevファイルコンテンツハッシュ(MD5)(バージョン番号管理)https://github.com/yeoman/grunt-filerevgrunt-useminファイル参照の変更https://github.com/yeoman/grunt-useminload-grunt-tasksoad-grunt-taskshttps://github.com/sindresorhus/load-grunt -タスク

プロジェクトフォルダーを開き、パスバーに「cmd」と入力してEnterを押します

Enterを押した後のインターフェイス

コマンドラインウィンドウを開いた後、インストールコマンドを入力します:

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

5 .Gruntfile.jsの設定 (ここがポイント、ポイント、ポイントです。重要なことは3回言います。)

最初に設定を投稿し、後でゆっくり説明します

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

私たちはいつもそこにあります あれやこれをインストールしますが、これらのインストールされたものをどのように使用しますか？

まず、Grunt の入門を学習してプラグインの使用方法を学びます。これは公式 Web サイトからの例です。

pkgはpackage.jsonを読み込んで生成されるjsonオブジェクトです。

uglify は grunt-contrib-uglify で指定されたタスク名です。各プラグインには対応する タスク名 があり、対応する github

grunt.loadNpmTasks(

'grunt-contrib-uglify') で確認できます。 ) ; 文字通りの意味からわかるように、 / は「uglify」タスクを提供するプラグインをロードします。

grunt.registerTask('default', ['uglify']); このエイリアスタスクはタスクリストに対応します
grunt エイリアスを渡すとき、それは実際には実行リスト その中にあるタスクを順番に実行します

これらの基本情報は公式サイトから閲覧できます。

私たちのニーズについて話しましょう。静的ファイルをパッケージ化して圧縮する必要があり、静的ファイルを参照するすべての html または css のファイル名を変更する必要があります。私たちがそれをどのように行うかを見てください。

ステップ 1: 再パッケージ化する必要があり、次にファイルをコピーする必要があるため、grunt-contrib-copy プラグインが必要です。

コピーする前に、まずソースファイルとターゲットファイルを決定する必要があります。ここでのソースファイルはtestフォルダーに配置され、ターゲットファイルはdistフォルダーに配置されます

ファイルパスを作成します

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

ファイルパスが作成されました。コピーを見てみましょう

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

コード内のコメントから 1 つまたは 2 つのことがわかります。ここでは cwd、src、dest について説明します。

実際、ここのソースパスは cwd + src です。これが実際のソース パスです。 dest は宛先パスのプレフィックスです。

ここで私が言いたいのは、srcの下にあるすべてのファイルです。つまり、srcフォルダー内のファイルをdestフォルダーにコピーすることを意味します。ここで、コピーする必要がある特定のフォルダーまたはファイルの種類を指定できます

ステップ 2: ファイルを圧縮します。ここでは、js と css の圧縮のみを行っています。対応するプラグインを確認してください。 。

css 圧縮には grunt-contrib-cssmin プラグインが必要で、プラグインの対応するタスク名は 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 圧縮には grunt-contrib-uglify プラグインと対応するタスクが必要ですプラグインの名前は 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;//目标文件路径前缀。
     }
    ]
   }
  },

ステップ 3: 静的ファイルの名前を変更する ここでのバージョン管理は、静的ファイルの名前を変更することによって実装されます。

名前の変更には grunt-filerev プラグインが必要です。このプラグインに対応するタスクは 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;]//图片 不需要加版本号
     }
    ]
   }
  },

css の名前を変更したいだけです。ここでは js を使用します。他のドキュメントは必要ありません。したがって、配列の最初のパラメーター src/** は src フォルダー内のすべてのファイルに一致し、最後の 2 つの xx は除外を意味します

ステップ 4: html 内の css および js への参照を変更する

参照するには、grunt-usemin プラグインに移動する必要があります。プラグインに対応するタスクは usemin

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

という名前です。 HTML のアドレスを与える src パラメーターは 1 つだけです。まだ CSS があるので、次のように記述できます

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

5 つのステップ: 参照のコピー、圧縮、名前変更、変更について説明しましたが、ここで 1 つ欠けていることがあります。それは、ファイルを削除する必要があるということです。各コピーの前にターゲットフォルダー。

ファイル参照を変更するには、grunt-contrib-clean プラグインを使用する必要があります。このプラグインに対応するタスクは clean

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

と呼ばれます。ここにはアドレスを与える src パラメーターが 1 つだけあります。対象フォルダーの。

すべてのタスクはここで解決されます。

私たちの登録タスクは異なります

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

説明	Github アドレス	grunt-conトリブクリーン

以上がGrunt による静的ファイル圧縮とバージョン管理パッケージの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。