kisphp-assets

v0.7.1

Published

3 months ago

Compile assets dependencies with gulp in a simple way

Downloads

0High
0Medium
0Low

kisphp

kisphp assets gulp

Kisphp assets management with GULP

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 16 installed and GulpJS
npm install --global gulp

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/master/install.sh | bash -

`package.json` file

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

{
  "scripts": {
    "build": "gulp --gulpfile app/gulp/gulpfile.js --cwd ."
  }
}

For the moment, the package.json file will only have the gulp execution script 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 --save kisphp-assets jquery bootstrap

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 gulp assets directory:

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

Copy `gulpfile.js` in `app/gulp/` directory

cp node_modules/kisphp-assets/gulpfile.js app/gulp/gulpfile.js

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

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

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

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

In the app/gulp/assets/js/modules/ directory you'll store all javascript modules for your website. A best practice is to minimize the dependencies between those 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/gulp/assets/js/app.js` with the following content:

cat << EOF > app/gulp/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 gulp 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.css
|   `-- external.css
`-- js
    |-- app.js
    `-- external.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/gulp/assets/css/main.css`

.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>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/gulp/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/gulp/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

SCSS support

The tool has a script to compile scss files, but the dependencies are not installed. If you use scss, run the following command to install the necessary dependencies:

npm i -S gulp-sass
npm i -S sass

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Kisphp assets management with GULP

Requirements

Install

package.json file

Create gulp assets directory:

Copy gulpfile.js in app/gulp/ directory

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

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

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