mStaticize

grunt-staticize

写这个工具之前，参考了业界用的比较多的 grunt-filerev 以及 grunt-usemin , 他们在前端代码的打包和自动化上作出了巨大的贡献。

为了更好的整合这些工具，简化这个过程，才有了现在看到的 mStaticize ，暂时只提供 Grunt 版本，后续根据实际情况，可能会发布独立的版本工具。

安装

该插件需要依赖 Grunt ~0.4.5 如果没有接触过 Grunt ，请确保参考 Grunt 的官方向导，以了解如何建立 Grunt 项目，以及如何建立 Gruntfile 开始一个 Grunt 项目。

你可以通过下面的命令安装插件：

npm install grunt-staticize --save-dev

插件完成之后就可以通过下面的方式，在 Gruntfile 中引入该插件：

grunt.loadNpmTasks('grunt-staticize');

staticize 用法

概述

在项目的 Gruntfile 中，通过在 grunt.initConfig() 中添加 staticize 段落来执行 staticize ：

 grunt.initConfig({
   staticize: {
     targetName:{
       rev:{  //校订任务（hash）
         msite:{ //任务名称
           'files': ['temp/msite/**/*.{css,js,jpg,png,gif}'],
           'dest': 'testF_2'
         },
         options: {  //任务配置
           'encoding': 'utf8',
           'algorithm': 'md5',
           'length': 8
         }
       },
       rep: {  //替换任务
         msite: {  //替换任务名称
           'files': ['temp/msite/*.{css,js,jade}'],
           'assetsDirs': 'temp/msite/static/',
           'patterns': /\/{0,1}\w+(\/\w+)*\.\w+/mg
         }
       }
     }
   },
 });

Revisioning task 校订任务（hash）

校订任务主要给静态文件添加hash版本号，例如 "/static/logo.jpg" -> "/static/logo.d124da.jpg"

校订任务通过 "rev" 字段来定义，"rev" 为json字段，包含一个或者多个子任务（target），以及一个选填的配置（option）

 //...
   rev:{
     targetA:{
       //...
     }
     targetB:{
       //...
     }
     option:{
       //...
     }
   }
 //...

target 任务

在每个任务中，需要指定 "files" 字段（你需要处理的文件） 以及 "dest" 字段（处理后的文件的存放目录）

"dest" 可选，如果指定了，将会在自定的目录存放处理好的文件，原始文件任然保留。如果未指定，将会在已有的文件上直接进行覆盖处理。

options [optional] 配置（选填）

options.encoding [optional]

类型: "String", 缺省值: "utf8"

文件的编码，默认为“utf8”

options.algorithm [optional]

类型: "String", 缺省值: "md5"

hash 方式，默认为“md5”

options.length [optional]

类型: "Number", 缺省值: 8

hash长度，默认为8

例子

 grunt.initConfig({
   staticize: {
     targetName:{
       rev:{  //revisioning task
         msite:{ //target
           'files': ['temp/msite/**/*.{css,js,jpg,png,gif}'],
           'dest': 'testF_2'
         },
         options: {  //revisioning options
           'encoding': 'utf8',
           'algorithm': 'md5',
           'length': 8
         }
       }
     }
   },
 });

Replace task 替换任务

替换任务主要是查找并替换所有的静态资源的hash引用

当执行完成 校订任务（hash）之后，例如 “/static/logo.jpg” -> “/static/logo.d124da.jpg”，相对于其他引用该文件的引用地址就应该进行智能匹配和替换。例如我们有下面的两个 index.css 和 index.html 文件：

 /* index.css */
 /* ... */
 .logo{
      background:url('/static/logo.jpg');
 }
 /* ... */

 <!--  index.html  -->
 <!--  ... -->
 <img src="/static/logo.jpg">
 <!--  ... -->

在进行过替换任务之后，所有对logo.jpg的引用都会被替换，他们会变成：

 /* index.css */
 /* ... */
 .logo{
      background:url('/static/logo.d124da.jpg');
 }
 /* ... */

 <!--  index.html  -->
 <!--  ... -->
 <img src="/static/logo.d124da.jpg">
 <!--  ... -->

替换任务通过字段 "rep" 进行标识

"rep" 是一个json类型的字符串，包含若干个子任务

 //...
   rep:{
     targetA: { },
     targetB: { }
   }
 //...

target

在每个任务中，需要指定下面的几个字段：

files

类型: "String", 必填

需要进行替换的文件，通常是 css,js 以及引用这些 css 和 js 的文件

assetsDirs

类型: "String", 必填

资源所在目录

patterns

类型: "RgeExp",必填

需要替换资源选择器

例子

 grunt.initConfig({
   staticize: {
     rep: {  //replace task 任务标识
       msite: {  //子任务
         'files': ['temp/msite/*.{css,js,jade}'],  //需要替换的文件
         'assetsDirs': 'temp/msite/static/',  //文件中引用的静态文件所在的相对根目录
         'patterns': /\/{0,1}\w+(\/\w+)*\.\w+/mg  
          //匹配字符，这里匹配类似 'ad/ad.jpg','dfa/d.css' 的字符，尝试在assetsDirs中寻找是否有匹配的值，有的话进行匹配
       }
     }
   },
 });

感谢

最后感谢大家的喜爱，也希望大家能对 mStaticize 提出宝贵意见！

关于项目

GitHub https://github.com/zmofei/grunt-staticize

问题提交 https://github.com/zmofei/grunt-staticize/issues

关于作者 https://www.zhuwenlong.com