• grunt配置太复杂?发布一个前端构建工具,简单高效,自动跳过未更新的文件


    做前端项目,如果没有一个自动化构建工具,手动处理那简直就是坑爹O(∩_∩)O。于是上网了解了下,grunt用的人不少,功能也挺强大。看了一下grunt的配置(包括gulp),感觉稍显复杂。当时项目结构非常简单,就是单文件夹下的html文件,再加上js、css、图片。需要的功能也就js的合并和压缩,html和css的简单格式化,功能简单,So easy……开搞,搞定第一版,一直用到今年。最近整理项目,感觉只支持单一文件夹,功能全内置,实在不够灵活,于是重写了第二版。功能实现没什么难的,麻烦的是打造一个可扩展性良好的架构,要配置简单,任务流程完全自主配置,插件、执行顺序完全可控,文本还要能单独处理,最好能和任务一样配置、控制方便。终于搞定了!一个良好的架构真是很花时间和精力,大家推荐支持一下呗O(∩_∩)O

    关于Qbuild.js(姑且这么叫之吧)

    • 轻量高效,易于配置。支持js压缩、文件合并、格式化、复制和重命名等。
    • 基于js的配置文件,支持自定义任务模块和文本处理,支持模块重用。
    • 灵活的文件扫描规则,支持通配符(*和**),支持正则表达式,支持排除规则。
    • 自动跳过未更新的文件,大大提升处理效率。
    • 重命名文件时,自动更新文件引用(可配置)。
    • 自定义输出目录,并保持文件引用(可配置)。
    • 支持将通过 document.write 输出内容的js文件,直接将js引用替换为输出内容。

    最后一点可能有人不了解,比如一个html网站,头部和尾部内容在很多html文件里是一样的,便于开发(避免变动一处要修改n个文件),可以将内容整合到js文件中,通过 document.write(html) 输出,而发布时却想将内容直接集成到html文件里(考虑到SEO优化、加载性能等),可以使用本工具实现。我承认这个功能比较蛋疼,可能很多人并不会用到,不过既然实现了,就放上来了,而且对后面实现文件重命名(比如js、css)后自动更新文件(比如html文件)引用有不少帮助。最重要的是全插件模式,任君配置。

    先看下运行效果:

    以下是 demo/index.html 文件的变化,输出文件夹为 release/www/index.html

    第二次运行,仅修改 demo/index.html 文件,截取部分运行结果

    如何使用

    1. 安装Node.js和压缩工具(uglify或 Google Closure Compiler(需java支持))

    2. 下载示例代码,将build文件夹放到你的项目中,配置好build.data.js,执行 node build/build.js (Windows 可直接运行 build.bat )

    3. 示例配置见 build/build.data.js 和 demo/build/build.data.js ,2种不同的情况,可供参考

    更多见 https://github.com/devin87/build.js

    配置代码(build.data.js)

    由于注释较多,默认折叠

      1 //build 配置文件
      2 module.exports = {
      3     //根目录,默认为配置文件所在路径,所有目录均基于此目录
      4     //绝对路径优先;若以./开头则基于配置文件路径(下同)
      5     root: "../",
      6     //输入目录,以下所有dir目录均基于此目录(若以/开头则直接基于根目录)
      7     dir: "demo",
      8     //输出目录,同上
      9     output: "release",
     10 
     11     //是否自动跳过未更新的文件
     12     //若任务对象有同名属性,则以任务对象的值为主 eg: dir、output、skipOutput、autoSkip、enable、preload、rename、registerText、runText
     13     autoSkip: true,
     14 
     15     //不保存自定义存储数据
     16     //noStore: false,
     17 
     18     //文件重命名
     19     //rename: "%f.name%.%date('yyyyMMddHHmm')%%f.ext%",
     20     //清理上次生成的文件
     21     //cleanDest: true,
     22 
     23     //注册任务处理模块,基于根目录,默认导入./module/*.js
     24     /*register: {
     25         concat: "./module/concat.js",
     26         format: "./module/format.js",
     27         cmd: "./module/cmd.js",
     28 
     29         //若处理程序相同,可重用已注册的模块 eg: copy:"format"
     30         copy: "./module/copy.js"
     31     },*/
     32 
     33     //注册文本处理模块,基于根目录,默认导入./module/text/*.js
     34     //registerText: {},
     35     //registerText: "./module/text/*.js",
     36 
     37     //默认执行的文本处理模块(按顺序执行),*表示其它模块
     38     runText: ["replace", "before", "after", "*"],
     39 
     40     //任务:文件合并
     41     concat: {
     42         title: "文件合并",
     43 
     44         //指定要运行的文本模块和执行顺序
     45         //runText: ["replace", "before", "after", "*"],
     46 
     47         dir: "js/src",
     48         output: "js-concat",
     49 
     50         //可以简写为 {"src/a.js":["a/t1.js", "a/t2.js", "a/t3.js"]}
     51         list: [
     52             {
     53                 dir: "a",
     54                 src: ["t1.js", "t2.js", "t3.js"],
     55                 dest: "src/a.js"
     56             },
     57             {
     58                 dir: "b",
     59                 src: ["t1.js", "t2.js", "D:/t.js"],
     60                 dest: "src/b.js"
     61             },
     62             {
     63                 //不从父级继承,以/开头直接基于root定义的目录
     64                 dir: "/release/js-concat/src",
     65                 src: ["a.js", "b.js"],
     66                 dest: "ab.js"
     67             }
     68         ],
     69 
     70         //在文件内容之前添加文本,见 ./module/text/append.js
     71         before: [
     72             "//build:%NOW% by Qbuild.js devin87@qq.com
    ",
     73 
     74             //给不同文件追加不同文本,不适用有同名文件的情况
     75             {
     76                 //其它文件追加的文本
     77                 "def": "//%f.fullname%
    ",
     78                 //ab.js追加的文本
     79                 "ab.js": "//a.js+b.js
    "
     80             }
     81         ],
     82 
     83         //在文件内容之后添加文本,同上,见 ./module/text/append.js
     84         after: [
     85             {
     86                 "ab.js": "
    //append after test!"
     87             }
     88         ],
     89 
     90         replace: [
     91             //移除
    字符,第一个参数可以是正则表达式或字符串,若是字符串,则需要指定第3个参数(正则表达式标记 eg:g、i、m或其组合)
     92             [/
    /g, ""],
     93             //移除VS引用
     94             [////s*<reference path="[^"]*" />
    /gi, ""]
     95         ],
     96 
     97         //禁用文件重命名
     98         rename: false
     99     },
    100 
    101     //任务:文件格式化
    102     format: [
    103         {
    104             title: "格式化html文件",
    105             //autoSkip: false,
    106 
    107             //注册单独的文本处理模块
    108             registerText: {
    109                 include: "./module/text/custom/document.write.js"
    110             },
    111 
    112             //传给 document.write.js 的参数
    113             include: "/demo/js/**(head|bottom).js",
    114 
    115             //dir: "",
    116 
    117             //一般output可省略,将自动保持原始文件夹结构
    118             //output: "",
    119 
    120             //要匹配的文件,可为数组 eg:["about/*.html", "m/*.html"]
    121             //*可匹配斜杆之外的字符,2个*可匹配所有字符
    122             match: "**.html",
    123             //要排除的文件
    124             exclude: "**.old.html",
    125 
    126             //默认会优化匹配规则以加速扫描 eg:[ab]/*.js => { dir:"[ab]",match:"*.js" }
    127             //若想在一些特殊情况下使用正则表达式,可以关闭优化
    128             //matchOptimize: true,
    129 
    130             replace: [
    131                 //移除html注释
    132                 [/(<!--(?![ifs)([^~]|~)*?-->)/gi, ""],
    133                 //移除无效的空格或换行
    134                 [/(<div[^>]*>)[s
    ]+(</div>)/gi, "$1$2"],
    135                 //移除多余的换行
    136                 [/(
    ?
    )(
    ?
    )+/g, "$1"],
    137                 //移除首尾空格
    138                 [/^s+|s+$/, ""]
    139             ]
    140         },
    141         {
    142             title: "格式化css文件",
    143             //enable: false,
    144 
    145             dir: "css",
    146             match: "*.css",
    147 
    148             replace: [
    149                 //移除css注释
    150                 [//*([^~]|~)*?*//g, ""],
    151                 //移除多余的换行
    152                 [/(
    ?
    )(
    ?
    )+/g, "$1"],
    153                 //移除首尾空格
    154                 [/^s+|s+$/, ""]
    155             ]
    156         }
    157     ],
    158 
    159     //任务:调用命令行压缩js
    160     cmd: [
    161         {
    162             title: "压缩js",
    163 
    164             //cmd: "java -jar D:\tools\compiler.jar --js=%f.fullname% --js_output_file=%f.dest%",
    165             cmd: "uglifyjs %f.fullname% -o %f.dest% -c -m",
    166 
    167             match: ["js/**.js", "m/js/**.js"],
    168             exclude: "js/data/**.js|js/error.js",
    169 
    170             replace: [
    171                 //去掉文件头部压缩工具可能保留的注释
    172                 [/^/*([^~]|~)*?*//, ""]
    173             ],
    174 
    175             //可针对单一的文件配置 before、after,def 表示默认
    176             before: [
    177                 {
    178                     "def": "//devin87@qq.com
    ",
    179                     "Q.js": "//Q.js devin87@qq.com
    "
    180                 },
    181                 "//build:%NOW%
    "
    182             ]
    183         }
    184     ],
    185 
    186     //任务:文件同步(复制)
    187     copy: [
    188         {
    189             title: "同步js数据",
    190             dir: "js/data",
    191             match: "**.js"
    192         },
    193         {
    194             title: "同步图片",
    195             dir: "images",
    196             match: "**"
    197         }
    198     ],
    199 
    200     //要启动的任务,按顺序执行,不支持*
    201     run: ["concat", "format", "cmd", "copy"]
    202 };
    View Code

    代码下载

    Qbuild.js 源码+示例代码

    写在最后

    由于图片较多,暂时先介绍到这。下次再介绍运行机制及插件的编写。

    如果本文或本项目对您有帮助的话,请不吝点个赞。欢迎交流!

  • 相关阅读:
    【转载】python自动提取文本中的时间(包含中文日期)
    【转载】PCA降维
    【转载】从头到尾彻底理解KMP算法
    【转载】傅里叶分析之掐死教程(完整版)更新于2014.06.06(Heinrich)
    【转载】白素贞的身世之谜
    React 路由参数改变页面不刷新问题
    前端学习资源笔记
    Nginx配置网站默认https
    基于Docker搭建大数据集群(一)Docker环境部署
    基于Docker搭建大数据集群(三)Hadoop部署
  • 原文地址:https://www.cnblogs.com/devin87/p/Qbuild.html
Copyright © 2020-2023  润新知