Producify

It's possible to start working with Producify at any time. Just navigate to your project folder and run Producify to serve the current folder:

$ cd path/to/project
$ producify . --serve

The first argument (.) tells Producify to work on the current folder. The second one (--serve, but could also be --server) tells Producify to serve your built project as a HTTP server.

By default, a random port will be selected, but it's possible to set a port to open the HTTP server:

$ producify . --serve --port 8080

By setting and unsetting flags, you can define how Producify must work. A plus sign (+) before one or more flags means that you want to enable them, whereas a minus sign (-) will disable the flags.

For example, if you only want the <include> feature, all you have to do is to disable the flags that are enabled by default, according to the command help above:

$ producify . --serve -HUC

Includes #back to top

Producify allows you to include HTML files in other HTML files by simply doing:

<include href="other_page.html" />

The contents of the file "other_page.html" are statically copied to the including file and served already included (and not using Ajax or frames).

Markdown

Producify will also parse Markdown contents and convert them to HTML if they are around the <markdown> tag:

<markdown>
Hello, **world**!
</markdown>

Markdown #back to top

Producify will also parse Markdown contents and convert them to HTML if they are around the <markdown> tag:

<markdown>
Hello, **world**!
</markdown>

CSS and Javascript #back to top

Producify will parse your HTML files and detect Javascript and CSS files normally included. If you want, Producify can minify (default: enabled) and bundle (default: disabled) many assets into a bundle file.

An important thing to note is that Producify will only bundle files that are inside the same folder. This is done to prevent errors on your application due to relative paths. This means that if you have several CSS files inside a folder, they will all be joined at the file "bundle.min.css" at the folder. However if your CSS files are in several locations, then each folder will have its own "bundle.min.css".

By default, the bundle file names are "bundle.min.css" for CSS and "bundle.min.js" for Javascript. You can change it by doing:

producify . --serve --concatjsfilename "oh_my_scripts.js" --concatcssfilename "oh_my_styles.css"

If assets concatenation is disabled (by default it is, but you can enable it with the flags +JP), and if minification is enabled (by default it is, but you can disable it with the flags -UC), then each file that does not end with ".min.css" or ".min.js" will be minified and the ".min" will be added to its name.

When you are ready to build, just replace --serve with --build [OUTPUT FOLDER]:

producify . --build ../output

The folder will be created with your production-ready website.

Flags and parameters can also be used when building:

producify . --build ../output --concatjsfilename "oh_my_scripts.js" --concatcssfilename "oh_my_styles.css" +JP -UC

It's also possible to develop using your production folder:

producify . --build ../output --serve

In this case, every change will be applied on the production folder, that will be kept served as HTTP server until you close Producify with Ctrl + C.

You can also set Producify to your npm build by editing your package.json:

"scripts": {
    "build": "producify . --build ../output"
}

You can install Producify as a dependency of your project:

npm i producify

In order to require it, just do:

const producify = require('producify').build

This is how to build a folder programatically with Producify from your NodeJS project:

producify.build(origin_folder, target_folder, {
    minifyHtml: true,
    minifyJs: true,
    minifyCss: true,
    concatJs: true,
    concatCss: true,
    parseIncludes: true,
    overwrite: true
}).then(function() {
    console.log("Done!")
})

Advanced usage:

producify.build(origin_folder, target_folder, {
    minifyHtml: true,
    minifyJs: true,
    minifyCss: true,
    concatJs: true,
    concatCss: true,
    parseIncludes: true,
    overwrite: true
}).then(function() {
    console.log("Building complete!");
    // start a HTTP server on the port 8080
    var server = producify.startHTTP(target_folder, 8080);
}).then(function() {
    // watch the folder for changes
    producify.startWatcher(origin_folder, function(evt, changedFile) {
        console.log("File " + changedFile + " was modified (" + evt + "). Should I do something?");
    });
}).catch(function(e) {
    console.log("Error: " + e);
})