https://github.com/taufik-nurrohman/factory

Simple Node.js script to generate CSS, HTML, and JavaScript files from ECMAScript, Pug, and SCSS files.
https://github.com/taufik-nurrohman/factory

css generator html js mjs node pug scss static

Last synced: 6 days ago
JSON representation

Simple Node.js script to generate CSS, HTML, and JavaScript files from ECMAScript, Pug, and SCSS files.

• Host: GitHub
• URL: https://github.com/taufik-nurrohman/factory
• Owner: taufik-nurrohman
• License: mit
• Created: 2021-03-29T13:57:05.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2024-10-23T23:25:03.000Z (22 days ago)
• Last Synced: 2024-10-24T08:30:48.598Z (22 days ago)
• Topics: css, generator, html, js, mjs, node, pug, scss, static
• Language: JavaScript
• Homepage:
• Size: 99.6 KB
• Stars: 7
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
Factory

=======

Simple Node.js script to generate CSS, HTML, and JavaScript files from ECMAScript, Pug, and SCSS files.

_Paket, paket Node.js apa yang digemari para suami? Namanya [@taufik-nurrohman/factory](https://www.npmjs.com/package/@taufik-nurrohman/factory). Karena cara pakainya `npm run pack`. Xixixi lucu yah pack_ 😁

Usage

-----

~~~ sh

mkdir my-project

mkdir my-project/src

mkdir my-project/dist

~~~

Paste your `*.scss`, `*.mjs`, and `*.pug` files to `.\my-project\src` folder.

~~~ sh

cd my-project

npm install @taufik-nurrohman/factory --save-dev

~~~

Create a `scripts` field that runs the `pack` command in `.\my-project\package.json`

~~~ json

{

  "scripts": {

    "pack": "pack --from=src --to=dist"

  }

}

~~~

Generate the production ready files this way:

~~~ sh

npm run pack

~~~

File extension from the source folder will be removed. Make sure to name your files with two file extension like so:

 - `index.css.scss`

 - `index.html.pug`

 - `index.js.mjs`

 - `index.php.pug`

 - `LICENSE.txt`

 - `LICENSE.txt.txt`

So that in the distributable folder, your files will be renamed to:

 - `index.css`

 - `index.html`

 - `index.js`

 - `index.php`

 - `LICENSE`

 - `LICENSE.txt`

> [!TIP]

>

> Use “fetch” syntax in `*.mjs` and `*.scss` files with a valid file path to load it inline:

>

> ~~~ scss

> /// FETCH('../node_modules/bootstrap/dist/css/bootstrap.css');

> ~~~

>

> ~~~ mjs

> /// FETCH('../node_modules/bootstrap/dist/js/bootstrap.js');

> ~~~

>

> External URL will be downloaded, and its content will replace the “fetch” block:

>

> ~~~ scss

> /// FETCH('https://example.com/assets/index.css');

> ~~~

>

> ~~~ mjs

> /// FETCH('https://example.com/assets/index.js');

> ~~~

Options

-------

Key | Description

--- | -----------

`--clean` | Clean-up the old compiled files before re-compile (default to `true`).

`--from` | Folder path to store the files to be compiled (default to `"src"`).

`--js-bottom` | Insert string at the bottom of the file (default to `""`).

`--js-exports` | What [export mode](https://rollupjs.org/guide/en/#outputexports) to use? (default to `"auto"`).

`--js-external` | JavaScript [external module names](https://rollupjs.org/guide/en/#quick-start) (default to `""`).

`--js-format` | JavaScript [module format](https://rollupjs.org/guide/en/#quick-start) (default to `"iife"`).

`--js-globals` | JavaScript global variables (default to `""`). Example: `--js-globals="jquery:jQuery,react:React,vue:Vue"`.

`--js-name` | JavaScript [module name](https://rollupjs.org/guide/en/#quick-start) (default to `""`).

`--js-top` | Insert string at the top of the file (default to `""`).

`--mjs` | Include MJS files to the output.

`--pug` | Include PUG files to the output.

`--scss` | Include SCSS files to the output.

`--silent` | Disable logging (default to `false`).

`--to` | Folder path to store the compiled files (default to `"dist"`).

`--version` | Show version information.