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 the factors that impact the SEO ranking in google. One technique for high-speed page loading is to combine all js files to one and the same goes for the CSS files.

The previous task is possible to achieve by using a task runner like the gulp.js , we can install gulp through the nodesjs package system the npm. We will assume that you already have installed npm in your computer, the next steps is 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

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


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 gulpfile we insert the following code

var gulp = require('gulp');
var concatCss = require('gulp-concat-css');
var order = require('gulp-order');

gulp.task('css', function(){
        ], { base: __dirname }))

And then in command line run the command

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 less HTTP requests in our web server.

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

You can use to gulp to optimize compress the assets to Magento Deployment Process.