When someone visits your website quick loading time on desktops and mobile phones is critical. This for two reasons the first one is for good user experience, visitors don't have to wait a lot on first-page loading or between navigation on various pages. Second is the page loading speed is one of the factors that impact the SEO ranking on google. One technique for high-speed page loading is to combine all js files to one and the same goes for the CSS files.

Installing Gulp JS

The previous task is possible to achieve by using a task runner like the Gulp, we can install Gulp JS through the nodes js package system the NPM. We will assume that you already have installed it in your computer, the next steps are the installation of gulp.

npm install gulp-cli -g or sudo npm install gulp-cli -g

if you find any problem run the command with sudo

npm install gulp -D or sudo npm install gulp -D

Configure gulp js

in the top, your project directory create a file a with the name

gulpfile.js

In CSS directory there three CSS files we want to combine in one, the bootstrap.css, boostrap-theme.css, and main.css for this we have to install all the gulp contcat module and  the gulp order module

npm i gulp-concat-css or sudo npm i gulp-concat-css npm i gulp-order or sudo npm i gulp-order

in gulp file, we insert the following code

var gulp = require('gulp');
var concatCss = require('gulp-concat-css');
var order = require('gulp-order');
gulp.task('css', function(){
        gulp.src('css/**/*.css').pipe(order([
           'css/bootstrap.css',
           'css/bootstrap-theme.css',
           'css/main.css'
        ], { base: __dirname }))
       .pipe(concatCss('all-static.css'))
       .pipe(gulp.dest('t/'))
});
gulp.task('default',['css']);

And then in command line run the command

gulp

This will combine the three CSS files in one, and will output a new file named all-static.css in directory t this speeding up our website because now the webpage has to load 1 file instead of three and we have 2 fewer HTTP requests in our web server.

You can down the sample files from here to test your self sample files

Gulp is a popular tool to manage website assets popular php framework have internal tools to manage taskrunners like laravel elixir for compiling assets witch provides a wrappert to manage gult tasks. Similar task runners or the tools can find frameworks like Yii Asset.