Bundling CSS to speed up page loads

My goal is to make web page loading faster by bundling all the CSS files together. The web browser will then only have to load only CSS files. This will only run when the application is starting.

void function setupApplication() {
  application.initialized           = now();

...

var renderCSSFile = application.GWASSETS & "combo.css";
if (FileExists(renderCSSFile)) FileDelete(renderCSSFile);

var renderCSS = "";
for (var myCSS in ListToArray("
    bootstrap, bootstrap-theme, bootstrap-jasny, font-awesome.min,
    datepicker,daterangepicker-bs3,
    datatables.bootstrap, datatables.colvis, datatables.fixedcolumns,
    select2, select2-bootstrap,
    main, scorecard"))  {

    if(FileExists(application.GWASSETS & trim(myCSS) & ".css")) {
        renderCSS &= FileRead(application.GWASSETS & trim(myCSS) & ".css");
        }
    }
FileWrite(renderCSSFile, renderCSS);

...

}

Is this the cleanest way to do this?

As suggested by Toni, you should use Gulp (or another task runner) to optimize the code shipped to the server and streamline your work. Among other things, task runners can concatenate files, minify/uglify code, transpile ES6 into ES5, serve your app locally, etc.

I strongly recommend Gulp (built on Node.js) because it allows you to create different tasks (such as the ones mentioned above) and stream them via a single pipeline, thus processing code fast and efficiently.

The main Gulp methods are task() (the task you want to create), src() (the source file(s)), pipe() (pipes the plugins that transform your code: pipe(plugin())) and dest()(where Gulp will send the processed file(s)). While Gulp provides a frame to create the "tasks pipeline", you need to use plugins to process/transform your code. Plugins are installed separately from Gulp as they are not part of the Gulp module itself (this means you need to install Gulp and all other plugins you want to use to create tasks).

I created a little tutorial below that will teach you the basics of Gulp. If you follow these steps you will create a simple sass task and have an idea what Gulp can do for you. Note: sass is a ruby gem. Make sure you have sass installed on your computer otherwise this will not work. You also need to have node.js and npm installed (https://nodejs.org/en/):

// First you need to install your node modules on the terminal:

$ npm install --global gulp-cli // gives you access to gulp on the command line

$ mkdir gulp-sass-demo && cd gulp-sass-demo // or any dir name you prefer. Make sure you don't name it "gulp-sass" though, because this is the name of a plugin we are going to use and npm will not allow you to install the plugin in a folder with the same name.

$ npm init // initiates npm on this directory--just hit enter for every question--at the end of the process you should have a "package.json" file, which holds important information about your node project

$ npm install --save-dev gulp gulp-sass // saves these two node modules as dev dependencies, meaning dependencies you need to develop the app but not to run it.

Note about how to install packages: If your project used "jQuery", for instance, you would need to install it as a dependency (not dev dependency) because your app would need jQuery's functionalities to work. In that case you would run this command $npm install --save jquery(this lists the module as a dependency on "package.json") or simply $npm install jquery (this doesn't list the module in package.json but makes it available as well).

After installing gulp and gulp-sass your package.json should look something like this:

{
  "name": "gulp-sass-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "MIT",
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-sass": "^3.1.0"
  }
}

That is it for the plugins installation. Now you should create a sass directory and one sass file that we will process via gulp-sass. So:

/gulp-sass-demo
  /sass
    styles.scss

In styles.scss, paste the following sass:

$font-stack: Helvetica, sans-serif;
$primary-color: #fff;

body {
  font: $font-stack;
  color: $primary-color;
}

Now you need to create a gulpfile.js, where you write your tasks:

// on the terminal make sure you are at the root of your project
$ touch gulpfile.js // creates the gulpfile--you can use vim, nano, or any other editor if you want to create and edit the file. i.e vim gulpfile.js

Open gulpfile.js in your IDE (you can do this on command line editors as well if you prefer), copy and paste the code below:

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function() {
  gulp.src('sass/*.scss') 
  .pipe(sass()) 
  .pipe(gulp.dest('css'))
});

gulp.task('default', ['sass']);

This is what the code above does:

1) uses the node.js module loader system to require the "gulp" npm module and the "gulp-sass" npm module and assigns these modules to variables

2) uses these variables to create a "sass" task

3) gets all ".scss" files from the 'sass' directory

4) processes the files using the sass plugin

5) sends the resulting css from the processed .scss files to a css directory--if you don't have that directory Gulp creates it for you

6) registers the task 'sass' to run after the task 'default'. To run a gulp task you need to use the gulp command + the task name on the terminal. In this case you would run $ gulp sass since the name of your task is "sass". When you register a "default" task, you can simply run gulp without specifying any task name and gulp will look for tasks registered in the second argument (in this case ['sass'] only) and run that task for you. You can register other tasks in the array when you have them and have something like this: `gulp.task('default', ['sass', '

StackExchange Code Review Q#112932, answer score: 7