Building the DHTMLX Library with Grunt

| Comments (1)

Grunt is a JavaScript task runner. It is like a swiss knife of JavaScript development. Due to the multiple plugins, Grunt can be used for wide set of tasks: file preprocessing, code minification, code linting, publishing, etc. In this article we will show how to use Grunt to compile a single file from the dhtmlxSuite package.

If you want, you can skip the technical details and download the final Grunt solution.

 
Build DHTMLX with Grunt

 
Getting Started

To run Grunt you need to have Node.js and npm installed. Also, we will use the dhtmlxSuite Standard package that can be downloaded here (open source, GPL-ed). The solution will work with any version of dhtmlxSuite so you can use the existing version.

 
Creating package.json

Lets create a package.json in the root folder of the dhtmlx package. This file will have the list of modules which we need for file building:

{
  "name": "dhtmlx",
  "version": "3.6.0",
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-uglify": "~0.2.5",
    "grunt-contrib-concat": "~0.3.0",
    "grunt-replace": "~0.5.1",
    "grunt-contrib-cssmin": "~0.6.2"
  }
}

Now run the next two commands from the command line:

npm install -g grunt-cli
npm install

The first line will install the Grunt command line interface. The second line will install the dependencies from the package.json.

 
Creating Gruntfile

Now lets create our build file. It must be named “Gruntfile“:

module.exports = function(grunt) {

  grunt.initConfig({
    pkg:grunt.file.readJSON('package.json'),
    concat: {
      options: {
        separator: ';\n'
      },
      dhtmlx:{
        name: "dhtmlx",
        src: ['dhtmlxForm/sources/dhtmlxcommon.js',
              'dhtmlxForm/sources/dhtmlxform.js',
              'dhtmlxForm/sources/ext/dhtmlxform_*.js'],
        dest: 'dist/<%= concat.dhtmlx.name %>.js'
      },
    },
    uglify: {
      dhtmlx:{
        files: {
          'dist/<%= concat.dhtmlx.name %>.min.js': ['<%= concat.dhtmlx.dest %>']
        }
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-cssmin');
  grunt.loadNpmTasks('grunt-replace');


  grunt.registerTask('dhtmlx', ['concat:dhtmlx', 'uglify:dhtmlx']);

};

The top part of the file defines possible operations. As you can see, there are two major sections: “concat” and “uglify”. The first one contais the list of files needed to be combined. The most important element here is “src” array. It contains all files, which we want to process.

You can also notice that we can use file masks and templates so there is no need to enter all files one by one. Just specify the mask, and all matching files will be included.

The second part contains configuration for code compressor. It is quite simple and can be used as is for any kind of build.

After these operations, the config file contains a set of commands that enables different Grunt tasks. At the last line, the config file contains our new task – “dhtmlx”, which is combined from combining and compression tasks.

Now when you have package.json and Gruntfile, you can run the following command from the console:

grunt dhtmlx

and Grunt will build the dhtmlx.js and dhtmlx.min.js files in “dist” subfolder. The target files will contain combined and compressed files that we have defined in the configuration file. With above configuration, the result files will include dhtmlxForm with all its extensions. By adding other files into the Grunfile configuration you can create a custom build which will include files that are necessary for your app.

An alternative way is to use the ready-to use Gruntfile which is configured to build the full dhtmlxSuite library.

 
Config for DHTMLX Suite

The attached archive contains ready-to use package.json and Gruntfile. You can extract these files to the root of the dhtmlxSuite folder and run the following commands:

  • to build a basic grid:
  • grunt grid
  • to build a grid with all extensions:
  • grunt gridfull
  • to build a basic form:
  • grunt form
  • to build a form with all extensions:
  • grunt formall
  • to build the full dhtmlx Suite as a single file:
  • grunt dhtmlx

The result files will be saved in the “dist” subfolder.

 
Afterthought

Of course, you can also use the LibCompiler tool that comes with the dhtmlxSuite but there is no clear winner. The LibCompiler provides an easy GUI but works only with the predefined configuration. Grunt requires a manual configuration but gives more flexibility for build process. Which one to choose depends on your needs.

Comments

  1. Brian January 3, 2014 at 9:37 pm

    Grunt and LibComplier can be handy when you’re worried about initial page load times and you need to reduce the amount of js code being transmitted from server to browser.

    The web app I am developing is on the opposite end of the spectrum. My strategy is to send every line of code at the first page load and serve all static files/images with a the cache max-age of 1 year so the browser never again requests the files/images from the server again for 1 year.

    The first page load is an extra 300 milliseconds, then every page afterwards is 0 milliseconds as it is served from the browser’s cache. Also network round trips are reduced as the browser never checks etags during the 1 year.

    I wish dhtmlx would create a master code set which contained every possible js file, every skin, every theme—everything– and then turn on/off extension, switch skins, change themes via APIs (instead of via file includes).

    All in all, dhtmlx is so nice to work with, it has become my framework of choice. Keep up the great work!

Leave a Reply