Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/jonhteper/catrina-bundler

a mini-bundler for catrina
https://github.com/jonhteper/catrina-bundler

Last synced: about 1 month ago
JSON representation

a mini-bundler for catrina

Awesome Lists containing this project

README 

        
# catrina-bundler



A mini-bundler for [catrina](https://github.com/PROMUEVETE-QUERETARO/catrina), and files minimizer.



## Dependencies



* **npm** version 7.0+ *(required)*

* **yarn** version 2+ *(optional)*



## Commands



### Start project



First create a new directory, for example: 



````

mkdir My-Project

````



Then, run command:



```

catrina init

```



This command create a project with actual directory name, and install catrina package whit npm or yarn. Then the tool will question you if you wish to start the wizard; if you input "n", the new project will have the standard configuration.



#### Use yarn



With the `-Y` flag to use 'yarn' in the project.



```

catrina init -Y

```

#### Configuration



The catrina's configuration is read in **catrina.config.json** file. You can set this configuration using the wizard setup was run after `catrina init` command or make yourself the file.



The file's structure is the next (this values are the _standard configuration_) in `/home/user/My-Project` location:



```json

{

  "input_js": "input.js",

  "input_css": "input.css",

  "deploy_path": "./deploy",

  "out_js": "My-Project.main.js",

  "out_css": "My-Project.styles.css",

  "location_lib": "/home/user/My-Project/node_modules/catrina",

  "module": false,

  "minify": false

}

```



* input_js: initial javascript file where you write your code.

* input_css: initial CSS file where you write your code.

* deploy_path: directory where you want build the final files.

* out_js: name of final javascript file generated by catrina.

* out_css: name of final CSS file generated by catrina.

* location_lib: the standard library location

* module: indicates if the output file will be a module

* minify: (experimental) indicates if the output file will minified



***Important***: *deploy path and input path can't be the same directory.*



#### Wizard



This tool runs after the `init` command, and is used to manually configure the project settings. The fields that are not explicitly modified will be taken from the standard configuration.



With the `-s` flag you create a new project with the standard configuration.



```

catrina init -s

```



### Build project



```

catrina build

```



This command reading a configuration file, then create a backup of deploy directory, this backup will restored if  something is wrong. Next, bundle the javascript and css input files. 



***Note***: *Run this command in project root*.



#### javascript



The imports is read, if the imports is in catrina package, this code ─ and internal dependencies─ is copied in the end the input file content; if imports isn't in catrina package this lines will continued in document start, except if configuration variable `module` is `false`.



Is important sort imports manually. For example, the following code does not work as expected:



```javascript

import {notify} from "catrina/notifications/notification.js";

import {parsePrice} from "utils/numbers.js";

import {salert, Alert} from "catrina/alerts/alert.js";

```



Sort catrina imports in top:



```javascript

import {notify} from "catrina/notifications/notification.js";

import {salert, Alert} from "catrina/alerts/alert.js";

import {parsePrice} from "utils/numbers.js";

```



#### css



Same as in the previous step: the imports is read, if the imports is in catrina package, this code  is copied in the end the input file content; if imports isn't in catrina package this lines will continued in document start. If imports a font included in catrina package, the font's files will be copied into deploy folder.



**Remember**: sort catrina imports in top:



```css

@import "node_modules/catrina/notifications/notifications.css";

@import "node_modules/catrina/forms/rounded-forms.css";

@import url("https://example.com/path/min.css");

```



Finally, if catrina's configurations variable `minify` is `true`, the final files will be minified.



### Minify files

**Important**: This feature is unstable. If you want best result, use a prettify tool before the minifier tool;



You can minify javascript or css files with the next command. 



```

catrina minify path/to/file destiny/path

```



For example, if you have a file *styles.css*, and you can save the minified file in current path, run the next command:



```

catrina minify styles.css

```



Then, you have *styles.css* and *min.styles.css* in the current path.



You can set the path and name of minified file, like this:



```

catrina minify styles.css ~/Desktop/main.css

```



For security, the original file not edited.



### Combine files



If you can combine two files, run the next command



```

catrina combine path/to/file1 path/to/file2 path/to/result/file

```



Example: 



```

catrina combine notes.txt notes_2.txt ~/Documents/notes.txt

```



You can minify compatible files after combination:



```

catrina combine -m static/footer.css static/main.css static/styles.min.css

```



***Warning***: If the final file exists, and the flag `-m` is active, this file will be deleting and a minified file replace it



Example:



```

[path]$ ls

input.css  main.css



[path]$ catrina -m combine input.css main.css main.css

File minified saved in: "path/min.main.css"

Files combined! Result file saved in "main.css"

No errors



[path]$ ls

input.css  min.main.css

```



***Remember**: You can only minify javascript or css files.*



---

## Compile catrina bundler



### Dependencies



* make

* cargo



### Using make (Generate `catrina`  bin)



Prepare the environment:

```

make prepare

```

This command creates a directory named *bin*, after deleting the old directory named *bin* (if it exists), then copies the LICENSE and README files to the folder.



Then, compile develop version:



```

make dev

```



Or, compile release version:

```

make tool

```



### Using cargo



```

make prepare

cargo build --release

cp target/release/catrina-bundler ./bin/catrina

```



## Installation



Only manually.