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.
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
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“:
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:
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:
- to build a grid with all extensions:
- to build a basic form:
- to build a form with all extensions:
- to build the full dhtmlx Suite as a single file:
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.