{"id":18389538,"url":"https://github.com/anseki/pre-proc","last_synced_at":"2025-06-26T14:31:46.572Z","repository":{"id":57329396,"uuid":"84749571","full_name":"anseki/pre-proc","owner":"anseki","description":"The super simple preprocessor for front-end development.","archived":false,"fork":false,"pushed_at":"2024-06-17T01:55:35.000Z","size":68,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-28T05:16:40.445Z","etag":null,"topics":["css","front-end","html","javascript","preprocess","preprocessor"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/anseki.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-03-12T19:01:01.000Z","updated_at":"2024-10-23T12:24:42.000Z","dependencies_parsed_at":"2025-04-07T02:44:38.979Z","dependency_job_id":null,"html_url":"https://github.com/anseki/pre-proc","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"purl":"pkg:github/anseki/pre-proc","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anseki%2Fpre-proc","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anseki%2Fpre-proc/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anseki%2Fpre-proc/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anseki%2Fpre-proc/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/anseki","download_url":"https://codeload.github.com/anseki/pre-proc/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/anseki%2Fpre-proc/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262084724,"owners_count":23256291,"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":["css","front-end","html","javascript","preprocess","preprocessor"],"created_at":"2024-11-06T01:43:40.282Z","updated_at":"2025-06-26T14:31:46.490Z","avatar_url":"https://github.com/anseki.png","language":"JavaScript","readme":"# preProc\n\n[![npm](https://img.shields.io/npm/v/pre-proc.svg)](https://www.npmjs.com/package/pre-proc) [![GitHub issues](https://img.shields.io/github/issues/anseki/pre-proc.svg)](https://github.com/anseki/pre-proc/issues) [![dependencies](https://img.shields.io/badge/dependencies-No%20dependency-brightgreen.svg)](package.json) [![license](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)\n\n* [Grunt](http://gruntjs.com/) plugin: [grunt-pre-proc](https://github.com/anseki/grunt-pre-proc)\n* [gulp](http://gulpjs.com/) plugin: [gulp-pre-proc](https://github.com/anseki/gulp-pre-proc)\n* [webpack](https://webpack.js.org/) loader: [pre-proc-loader](https://github.com/anseki/pre-proc-loader)\n\nThe super simple preprocessor for front-end development.\n\nIf you want preprocessor that works like popular compilers or feature rich preprocessor, other great tools such as [preprocess](https://github.com/jsoverson/preprocess) may be better for you.  \nThis preProc is very simple preprocessor for front-end development. JavaScript, HTML, CSS, etc.\n\n**Why is simple preprocessor needed?**\n\nIn front-end development, almost tasks are processed by a build script such as webpack, gulp, Grunt, etc.  \nTherefore we need something that processes only a few tasks e.g. switching parameters. And it allows the build script to control its behavior flexibly. It only edits a source code by tags.\n\nFor example, in a case of JavaScript code:\n\n```js\nTEST_MODE = true; // [DEBUG/]\n```\n\nRemove all lines marked by `DEBUG` tag:\n\n```js\nvar preProc = require('pre-proc');\n// ...\ncode = preProc.removeTag('DEBUG', code);\n```\n\n## Tags\n\nThe preProc finds specific tag in the source code, and it does something.  \nYou can insert tags by using comment syntax of each language.  \nSupported syntax:\n\n```js\n/* TAG */\n```\n\n```html\n\u003c!-- TAG --\u003e\n```\n\n```js\n// TAG\n```\n\nTo indicate a part of the code, the following tag types are supported:\n\n- `[TAG/]` : An empty tag indicates a line (i.e. all of the line that contains this tag).\n- `[TAG]` ... `[/TAG]` : A pair of a start tag and an end tag indicates a string between those. The string might contain multiple lines.\n\n## Methods\n\n### `removeTag`\n\n```js\nchangedContent = preProc.removeTag(tag, sourceContent[, srcPath[, pathTest]])\n```\n\nRemove one or more parts of the source code.\n\nThe `tag` can be a string as single tag or an array that contains multiple tags. This method finds empty tags and pairs of a start tag and an end tag.\n\nThe `sourceContent` is a string that is the source code.\n\nFor example, in a case of CSS code:\n\n```css\n.foo {\n  display: none;\n  display: block; /* [TEST-VIEW/] */\n}\n\n/* [DEBUG] */\n.debug-info {\n  font-size: 1.5em;\n}\n/* [/DEBUG] */\n```\n\n```js\nvar preProc = require('pre-proc');\n// ...\ncssCode = preProc.removeTag(['TEST-VIEW', 'DEBUG'], cssCode);\n```\n\nResult (`cssCode`):\n\n```css\n.foo {\n  display: none;\n}\n```\n\nThe `srcPath` and `pathTest` provide a convenient filter.  \nIf a path to the source file is specified for the `srcPath`, the method finds the `tag` only when that `srcPath` was matched to the `pathTest`.  \nThe `pathTest` can be a string that must be at the start of the `srcPath`, a RegExp that tests the `srcPath` or an array that contains multiple. The method finds the `tag` when any one was matched.\n\nFor example:\n\n```js\n// Remove `DEBUG` contents, if current file is in `dir1` directory or it is JS file.\ncode = preProc.removeTag('DEBUG', code, filePath, ['/path/to/dir1', /\\.js$/]);\n```\n\n### `replaceTag`\n\n```js\nchangedContent = preProc.replaceTag(tag, replacement, sourceContent[, srcPath[, pathTest]])\n```\n\nReplace one or more parts of the source code with specific string.\n\nThis method is similar to the [`removeTag`](#removetag) method except that only a string that is specified for the `replacement` argument is inserted at each point that the tags existed.  \nThat is, the following two codes work same:\n\n```js\nchangedContent = preProc.removeTag(tag, sourceContent, srcPath, pathTest);\n```\n\n```js\nchangedContent = preProc.replaceTag(tag, '', sourceContent, srcPath, pathTest);\n```\n\nThe `replacement` can be a string or an array that contains multiple strings. If arrays are specified for both the `tag` and `replacement`, each found tag is replaced with a `replacement` element that has the same index of the array.\n\nFor example:\n\n```js\ncode = preProc.replaceTag(['TAG-1', 'TAG-2', 'TAG-3'], ['VALUE-1', 'VALUE-2', 'VALUE-3'], code);\n// 'TAG-1' =\u003e 'VALUE-1', 'TAG-2' =\u003e 'VALUE-2', 'TAG-3' =\u003e 'VALUE-3',\n```\n\nIf the `replacement` array is shorter than the `tag` array, a last `replacement` element is repeated for the remaining `tag` elements.\n\nFor example:\n\n```js\ncode = preProc.replaceTag(['TAG-1', 'TAG-2', 'TAG-3'], ['VALUE-1', 'VALUE-2'], code);\n// 'TAG-1' =\u003e 'VALUE-1', 'TAG-2' =\u003e 'VALUE-2', 'TAG-3' =\u003e 'VALUE-2' (Missing `replacement[2]`),\n```\n\n```js\ncode = preProc.replaceTag(['TAG-1', 'TAG-2', 'TAG-3'], 'COMMON-VALUE', code);\n```\n\n### `pickTag`\n\n```js\npartOfContent = preProc.pickTag(tag, sourceContent)\n```\n\nGet a part of the source code.\n\nThe `tag` is a string as a tag. This method finds a pair of a start tag and an end tag.\n\nThe `sourceContent` is a string that is the source code.\n\nFor example, in a case of HTML code:\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003cbody\u003e\n\u003c!-- [PANEL] --\u003e\n\u003cdiv\u003e\n  foo bar\n\u003c/div\u003e\n\u003c!-- [/PANEL] --\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n```js\nvar preProc = require('pre-proc');\n// ...\nhtmlPanel = preProc.pickTag('PANEL', html);\n```\n\nResult (`htmlPanel`):\n\n```html\n\u003cdiv\u003e\n  foo bar\n\u003c/div\u003e\n```\n\nWhen the tag was not found, this method returns `null`, not a string. It is useful for handling unknown source code.\n\nFor example:\n\n```js\nvar preProc = require('pre-proc');\n// ...\ntarget = preProc.pickTag('TAG', source);\nif (target != null) {\n  // Do something only when the target was found. the target might be an empty string.\n}\n```\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanseki%2Fpre-proc","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fanseki%2Fpre-proc","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fanseki%2Fpre-proc/lists"}