Speeding up your website using gulp.js to combine css stylesheets

  • webtech

When someone visits your website is important to have quick loading time on desktops and mobile phones, this  for two reasons the first one is for a good user experience, visitors doesn't have to wait a lot on first page loading or through navigation on various pages. Second page loading speed is one the factors that impacts the seo ranking in google. One technique for high speed page loading is to combine all js files to one and 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

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 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(){
         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 less http requests in our web server.

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

Net Salary Calculator Business Profit Calculator Ecommerce Software