{"id":28408479,"url":"https://github.com/elemefe/webspoon","last_synced_at":"2025-06-30T02:33:02.597Z","repository":{"id":35349050,"uuid":"39611514","full_name":"ElemeFE/webspoon","owner":"ElemeFE","description":"这是一个 Web 前端工程化的工具包","archived":false,"fork":false,"pushed_at":"2016-11-09T04:21:58.000Z","size":70,"stargazers_count":48,"open_issues_count":0,"forks_count":16,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-06-24T03:08:07.637Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ElemeFE.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-07-24T04:21:13.000Z","updated_at":"2024-08-30T16:41:24.000Z","dependencies_parsed_at":"2022-09-17T11:22:57.562Z","dependency_job_id":null,"html_url":"https://github.com/ElemeFE/webspoon","commit_stats":null,"previous_names":[],"tags_count":24,"template":false,"template_full_name":null,"purl":"pkg:github/ElemeFE/webspoon","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ElemeFE%2Fwebspoon","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ElemeFE%2Fwebspoon/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ElemeFE%2Fwebspoon/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ElemeFE%2Fwebspoon/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ElemeFE","download_url":"https://codeload.github.com/ElemeFE/webspoon/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ElemeFE%2Fwebspoon/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262698960,"owners_count":23350210,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-06-02T03:37:25.505Z","updated_at":"2025-06-30T02:33:02.590Z","avatar_url":"https://github.com/ElemeFE.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## WebSpoon\n\n这是一个 Web 前端工程化的工具包。\n\n\n### 安装方式\n\n```bash\nnpm install webspoon\n```\n\n或者也可以全局安装\n\n```bash\nsudo npm install webspoon -g\n```\n\n\n### 提供的工具\n\n##### webspoon-usemin\n\n用于合并压缩 html 文件中特殊注释块内的静态资源。\n\n```bash\nwebspoon-usemin \u003cFileList\u003e\n```\n\n在 html 文件中可能有这样的注释块。\n\n```html\n\u003c!-- build href=\"引用路径\" file=\"文件路径\" --\u003e\n\u003cscript src=\"引用路径\" file=\"文件路径\"\u003e\u003c/script\u003e\n\u003clink rel=\"stylesheet\" href=\"js文件路径\" file=\"文件路径\"\u003e\n\u003c!-- endbuild --\u003e\n```\n\n在对这个 html 文件执行 webspoon-usemin 之后会将注释块内的文件打包成一个 js 文件（css 也会被转换成 js 以便统一管理），并保存到注释上写着的文件路径中。\n\n注：\n  1. 无论是读取文件还是写入文件，路径都相对于当前执行的工作目录。\n  2. 替换完成后会覆盖原始文件，如果不希望被覆盖请先复制出来。\n\n##### webspoon-rev\n\n用于给静态资的文件名中加入 hash，同时替换引用文件的引用路径。\n\n```bash\nwebspoon-rev -base \u003cFileList\u003e -static \u003cFileList\u003e\n```\n\n传入两个参数 -base 和 -static 它们后面需要跟上一个文件列表。\n\nbase 列表指定的是源文件，如果里面有对 static 列表中文件的引用就会被更新到带 hash 的版本。\n\nstatic 列表指定的是静态文件，它会根据其自身内容重命名到带 hash 的版本。\n\n注：\n  1. base 中对静态资源的引用必须是从当前执行的工作目录到静态文件目录的完整相对路径。\n  2. base 列表中的文件更新后会覆盖原始文件，如果不希望被覆盖请先复制出来。\n  3. static 列表中的文件操作是被重命名而不是复制，如需备份请提前。\n\n\n##### webspoon-watch\n\n用于监视项目文件，在文件变化时执行相应的命令。\n\n```bash\nwebspoon-watch -target \u003cFileList\u003e -exec \u003cCommand\u003e\n```\n\n传入两个参数 -target 和 -exec。\n\ntarget 参数用于指定需要监视的文件。\n\nexec 参数用于指定监视到文件变化后需要执行的脚本。\n\n在执行的脚本中可以通过 $src 变量来取到当前处理的文件路径（相对路径）。\n\n注：\n  1. 只有当文件内容有变化时才会触发。\n  2. 通配符初始解析，这意味着开始 watch 之后才创建的文件不会被 watch 到。\n\n\n##### webspoon-pack\n\n用于将静态模板打包成 js 文件\n\n```bash\nwebspoon-pack \u003cFileList\u003e -moduleName \u003cmoduleName\u003e -regexp \u003cRegexp\u003e -replacement \u003cReplacement\u003e\n```\n\n三个可选参数\n\n* `-moduleName` 模块名，UMD 的模块名\n* `-regexp` 用于替换文件路径的正则\n* `-replacement` 替换的目标字符串\n\n注：\n  1. moduleName 缺省值为 templates。\n  2. 此处使用 js 的正则，并非 sed。\n\n\n##### webspoon-wildcard\n\n用于解析 html 文件中 SCRIPT/LINK 元素的 src/href 属性中的通配符。\n\n```bash\nwebspoon-wildcard \u003cFileList\u003e\n```\n\nhtml 文件中这样设置通配符\n\n```html\n\u003cscript wildcard=\"dist/**/*.js\"\u003e\u003c/script\u003e\n\u003clink rel=\"stylesheet\" wildcard=\"dist/**/*.css\" /\u003e\n```\n\n将得到大概这样的结果\n\n```html\n\u003cscript src=\"/dist/a.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"/dist/b.js\"\u003e\u003c/script\u003e\n\u003clink rel=\"stylesheet\" href=\"/dist/a.css\" /\u003e\n\u003clink rel=\"stylesheet\" href=\"/dist/b.css\" /\u003e\n```\n\n生成结果中标签上的 `file` 属性可以通过 webspoon-usemin 处理掉。\n\n元素上除了 `wildcard` 属性外还有 `root`、`regexp`、`replacement` 三个可选属性。\n\n* `root` 指定一个站点根目录，用于调整结果中 `src`/`href` 的路径。\n* `regexp` 用于替换文件路径的正则\n* `replacement` 替换的目标字符串\n\n注：\n  1. 替换步骤在 root 解析完毕后执行。\n  2. 此处使用 js 的正则，并非 sed。\n  3. 操作的文件更新后会覆盖原始文件，如果不希望被覆盖请先复制出来。\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felemefe%2Fwebspoon","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Felemefe%2Fwebspoon","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felemefe%2Fwebspoon/lists"}