{"id":2098,"date":"2014-01-02T11:55:49","date_gmt":"2014-01-02T08:55:49","guid":{"rendered":"http:\/\/www.dhtmlx.com\/blog\/?p=2098"},"modified":"2026-04-03T15:32:43","modified_gmt":"2026-04-03T12:32:43","slug":"building-dhtmlx-library-with-grunt","status":"publish","type":"post","link":"https:\/\/dhtmlx.com\/blog\/building-dhtmlx-library-with-grunt\/","title":{"rendered":"Building the DHTMLX Library with Grunt"},"content":{"rendered":"

\n

\n
\n \n <\/path>\n <\/svg>\n\n INFO\n <\/div>\n\n
\n

\n If you are using an outdated version of DHTMLX Suite 5 and require the documentation for it, \n please contact us<\/a>,
and we will send it to you.\n <\/p>\n <\/div>\n <\/div>\n
\nGrunt<\/a> 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.<\/p>\n

If you want, you can skip the technical details and download the final Grunt solution<\/a>.<\/p>\n

 
\n\"Build<\/p>\n

 
\nGetting Started<\/strong><\/p>\n

To run Grunt you need to have Node.js<\/a> and npm<\/a> installed. Also, we will use the dhtmlxSuite Standard package<\/a> (open source, GPL-ed). The solution will work with any version of dhtmlxSuite so you can use the existing version.<\/p>\n

Creating package.json<\/strong><\/p>\n

Lets create a package.json<\/em> in the root folder of the dhtmlx package. This file will have the list of modules which we need for file building:<\/p>\n

{<\/span>
\n  "name"<\/span>: "dhtmlx"<\/span>,
\n  "version"<\/span>: "3.6.0"<\/span>,
\n  "devDependencies"<\/span>: {<\/span>
\n    "grunt"<\/span>: "~0.4.1"<\/span>,
\n    "grunt-contrib-uglify"<\/span>: "~0.2.5"<\/span>,
\n    "grunt-contrib-concat"<\/span>: "~0.3.0"<\/span>,
\n    "grunt-replace"<\/span>: "~0.5.1"<\/span>,
\n    "grunt-contrib-cssmin"<\/span>: "~0.6.2"<\/span>
\n  }<\/span>
\n}<\/span><\/div><\/div>\n

Now run the next two commands from the command line:<\/p>\n

npm install<\/span> -g<\/span> grunt-cli
\nnpm install<\/span><\/div><\/div>\n

The first line will install the Grunt command line interface. The second line will install the dependencies from the package.json<\/em>.<\/p>\n

 
\nCreating Gruntfile<\/strong><\/p>\n

Now lets create our build file. It must be named “Gruntfile<\/strong>“:<\/p>\n

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

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. <\/p>\n

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. <\/p>\n

The second part contains configuration for code compressor. It is quite simple and can be used as is for any kind of build.<\/p>\n

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.<\/p>\n

Now when you have package.json<\/em> and Gruntfile<\/em>, you can run the following command from the console:<\/p>\n

grunt dhtmlx<\/div><\/div>\n

and Grunt will build the dhtmlx.js<\/em> and dhtmlx.min.js<\/em> files in “dist<\/strong>” 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<\/em> configuration you can create a custom build which will include files that are necessary for your app.<\/p>\n

An alternative way is to use the ready-to use Gruntfile<\/em> which is configured to build the full dhtmlxSuite library.<\/p>\n

 
\nConfig for DHTMLX Suite<\/strong><\/p>\n

The attached archive<\/a> contains ready-to use package.json<\/em> and Gruntfile<\/em>. You can extract these files to the root of the dhtmlxSuite folder and run the following commands:<\/p>\n