kisphp-assets

v1.0.1

Published

5 months ago

Compile assets dependencies with simple tools

0High
0Medium
0Low

kisphp

kisphp assets

Kisphp assets management

This tool will allow you to compile javascripts, css and copy assets file to your public directory in a very easy way.

Requirements

You need to have NodeJS 20 installed.

Install

Follow the next steps to create the necessary file for the tool integration

If you want to have a quick demo or a quick setup, and you have an empty directory, run the following command to install and add the files automatically:
curl -s https://gitlab.com/kisphp/assets/raw/main/install.sh | bash -

`package.json` file

Create the package.json script in the root directory of the project with the following content:

{
  "scripts": {
    "build": "node node_modules/kisphp-assets/kisphp-assets.js build",
    "clean": "rm -rf ./node_modules"
  }
}

For the moment, the package.json file will only have the scripts defined. We also need some dependencies defined in this file, but we'll add them with the following command.

Run the following command to install the dependencies and save them into package.json file:

npm install kisphp-assets jquery bootstrap npm install @fortawesome/fontawesome-free

After the command finishes, you'll see that inside the package.json file will appear a list of dependencies that we'll need for our project.

Create the assets directory:

mkdir -p app/assets/{css,images,js}
mkdir -p app/assets/js/modules
touch app/assets/css/main.styl

Copy `assets-config.dist.js` in your application root directory and remove `dist` from its name

cp node_modules/kisphp-assets/assets-config.dist.js ./assets-config.js

Create the `app/assets/js/modules/demo.js` file with the content:

cat << EOF > app/assets/js/modules/demo.js
module.exports = {
    init: function() {
        console.log('file loaded');
    }
}
EOF

In the app/assets/js/modules/ directory you'll store all javascript modules for your website. A best practice is to minimize the dependencies between these files as much as possible. Every file will export an object with the init() function that will be called in the following file.

Create the `app/assets/js/app.js` with the following content:

cat << EOF > app/assets/js/app.js
$(document).ready(function(){
    require('./modules/demo').init();
    // add here more files that do one thing (Single Responsibility Principle)
});
EOF

This is file where you load all your javascript modules.

Run npm script to compile all assets file

npm run build

When the command will finish you'll see new directories and files inside the public directory.

public
|-- css
|   |-- app-latest.css
|   `-- external-latest.css
`-- js
    |-- app-latest.js
    `-- external-latest.js

Load generated assets files into your html code

To load the generated files into your html template, you need to add the css files inside the <head>...</head> tags:

<link rel="stylesheet" href="/css/external.css" />
<link rel="stylesheet" href="/css/app.css" />

And then add the javascript files right before the </body> closing tag:

<script src="/js/external.js"></script>
<script src="/js/app.js"></script>

Examples of configuration

Here is a fully functional example of how to use this library.

Create the following files in a new directory

`app/assets/css/main.styl`

.alfa {
  background: #369;
  color: #fff;
}
.beta {
  background: #6f42c1;
  color: #fff;
}
.gama {
  background #a52834;
  color: #fff;
}

Load assets file in your `public/index.html` or `public/index.php` file

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Kisphp Assets Example</title>
    <link rel="stylesheet" href="/css/external.css" />
    <link rel="stylesheet" href="/css/app.css" />
</head>
<body>

<div class="container">
    <div class="row">
        <div class="col alfa">
            1 of 3
        </div>
        <div class="col-6 beta">
            2 of 3 (wider)
        </div>
        <div class="col gama">
            3 of 3
        </div>
    </div>
    <div class="row">
        <div class="col-sm-3 clickme">Click me</div>
        <div class="col"><span id="counter">0</span></div>
    </div>
</div>

<script src="/js/external.js"></script>
<script src="/js/app.js"></script>
</body>
</html>

Create the counter js file in app/assets/js/modules/counter.js with the following content:

module.exports = {
    init: function (){
        $('.clickme').on('click', function (ev){
            ev.preventDefault();

            let counter = $('#counter');
            let counterValue = counter.html();

            counter.html(parseInt(counterValue) + 1);
        });
    }
};

Then, you need to register the new javascript module to the application

Open the file app/assets/js/app.js and add your new module:

$(document).ready(function(){
    require('./modules/demo').init();
    require('./modules/counter').init();
});

Once you have all these files run the following commands to compile the dependencies

npm install

npm run build

If you have php installed, run the following command:

php -S localhost:8000 -t public

And open the url http://localhost:8000/ in your browser

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Kisphp assets management

Requirements

Install

package.json file

Create the assets directory:

Copy assets-config.dist.js in your application root directory and remove dist from its name

Create the app/assets/js/modules/demo.js file with the content:

Create the app/assets/js/app.js with the following content: