https://github.com/anseki/pre-proc
The super simple preprocessor for front-end development.
https://github.com/anseki/pre-proc
css front-end html javascript preprocess preprocessor
Last synced: 8 months ago
JSON representation
The super simple preprocessor for front-end development.
- Host: GitHub
- URL: https://github.com/anseki/pre-proc
- Owner: anseki
- License: mit
- Created: 2017-03-12T19:01:01.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2024-06-17T01:55:35.000Z (over 1 year ago)
- Last Synced: 2025-05-28T05:16:40.445Z (9 months ago)
- Topics: css, front-end, html, javascript, preprocess, preprocessor
- Language: JavaScript
- Size: 66.4 KB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# preProc
[](https://www.npmjs.com/package/pre-proc) [](https://github.com/anseki/pre-proc/issues) [](package.json) [](LICENSE)
* [Grunt](http://gruntjs.com/) plugin: [grunt-pre-proc](https://github.com/anseki/grunt-pre-proc)
* [gulp](http://gulpjs.com/) plugin: [gulp-pre-proc](https://github.com/anseki/gulp-pre-proc)
* [webpack](https://webpack.js.org/) loader: [pre-proc-loader](https://github.com/anseki/pre-proc-loader)
The super simple preprocessor for front-end development.
If 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.
This preProc is very simple preprocessor for front-end development. JavaScript, HTML, CSS, etc.
**Why is simple preprocessor needed?**
In front-end development, almost tasks are processed by a build script such as webpack, gulp, Grunt, etc.
Therefore 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.
For example, in a case of JavaScript code:
```js
TEST_MODE = true; // [DEBUG/]
```
Remove all lines marked by `DEBUG` tag:
```js
var preProc = require('pre-proc');
// ...
code = preProc.removeTag('DEBUG', code);
```
## Tags
The preProc finds specific tag in the source code, and it does something.
You can insert tags by using comment syntax of each language.
Supported syntax:
```js
/* TAG */
```
```html
```
```js
// TAG
```
To indicate a part of the code, the following tag types are supported:
- `[TAG/]` : An empty tag indicates a line (i.e. all of the line that contains this tag).
- `[TAG]` ... `[/TAG]` : A pair of a start tag and an end tag indicates a string between those. The string might contain multiple lines.
## Methods
### `removeTag`
```js
changedContent = preProc.removeTag(tag, sourceContent[, srcPath[, pathTest]])
```
Remove one or more parts of the source code.
The `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.
The `sourceContent` is a string that is the source code.
For example, in a case of CSS code:
```css
.foo {
display: none;
display: block; /* [TEST-VIEW/] */
}
/* [DEBUG] */
.debug-info {
font-size: 1.5em;
}
/* [/DEBUG] */
```
```js
var preProc = require('pre-proc');
// ...
cssCode = preProc.removeTag(['TEST-VIEW', 'DEBUG'], cssCode);
```
Result (`cssCode`):
```css
.foo {
display: none;
}
```
The `srcPath` and `pathTest` provide a convenient filter.
If 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`.
The `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.
For example:
```js
// Remove `DEBUG` contents, if current file is in `dir1` directory or it is JS file.
code = preProc.removeTag('DEBUG', code, filePath, ['/path/to/dir1', /\.js$/]);
```
### `replaceTag`
```js
changedContent = preProc.replaceTag(tag, replacement, sourceContent[, srcPath[, pathTest]])
```
Replace one or more parts of the source code with specific string.
This 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.
That is, the following two codes work same:
```js
changedContent = preProc.removeTag(tag, sourceContent, srcPath, pathTest);
```
```js
changedContent = preProc.replaceTag(tag, '', sourceContent, srcPath, pathTest);
```
The `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.
For example:
```js
code = preProc.replaceTag(['TAG-1', 'TAG-2', 'TAG-3'], ['VALUE-1', 'VALUE-2', 'VALUE-3'], code);
// 'TAG-1' => 'VALUE-1', 'TAG-2' => 'VALUE-2', 'TAG-3' => 'VALUE-3',
```
If the `replacement` array is shorter than the `tag` array, a last `replacement` element is repeated for the remaining `tag` elements.
For example:
```js
code = preProc.replaceTag(['TAG-1', 'TAG-2', 'TAG-3'], ['VALUE-1', 'VALUE-2'], code);
// 'TAG-1' => 'VALUE-1', 'TAG-2' => 'VALUE-2', 'TAG-3' => 'VALUE-2' (Missing `replacement[2]`),
```
```js
code = preProc.replaceTag(['TAG-1', 'TAG-2', 'TAG-3'], 'COMMON-VALUE', code);
```
### `pickTag`
```js
partOfContent = preProc.pickTag(tag, sourceContent)
```
Get a part of the source code.
The `tag` is a string as a tag. This method finds a pair of a start tag and an end tag.
The `sourceContent` is a string that is the source code.
For example, in a case of HTML code:
```html
foo bar
```
```js
var preProc = require('pre-proc');
// ...
htmlPanel = preProc.pickTag('PANEL', html);
```
Result (`htmlPanel`):
```html
foo bar
```
When the tag was not found, this method returns `null`, not a string. It is useful for handling unknown source code.
For example:
```js
var preProc = require('pre-proc');
// ...
target = preProc.pickTag('TAG', source);
if (target != null) {
// Do something only when the target was found. the target might be an empty string.
}
```