Grunt tutorial 2-Concat plug-in

Grunt tutorial 2

Concat plugin

Concat is a common plug-in used in grunt for file connection. For example, if you write a class library, there are three modules, such:

A. js

B. js

C. js

When your project is ready for release, you may need to combine these three modules into a large module, all. js. This can reduce HTTP requests and increase the page response speed.

If we need to connect these three modules and test all. js at each release, it will be a headache to ensure that the major modules will be released without any bugs. A good way is that every time you modify a small module, it automatically connects to all. JS, and your project also references all. js during development,

Then we can avoid the above problems.

At this time, we need an automated tool that automatically connects to JS files. Based on grunt, It is the Concat plug-in.

The following describes how to use Concat.

1. Merge multiple files into one file

grunt.initConfig({  concat: {    options: {      separator: ‘;‘,      stripBanners: true,      banner: ‘/*! hello - v1.2.3 - 2014-2-4 */‘    },    dist: {      src: [‘a.js‘, ‘b.js‘, ‘c.js‘],      dest: ‘all.js‘,    },  },});

Options contains some options, key-value pairs, and some simple configurations.

The connection Separator of the separator file, indicating that the connected file is separated by the specified separator.

Banner appears at the beginning of the merged file. It is generally used for description and comment.

Footer appears at the bottom of the merged file. It is generally used for description and comment.

If stripbanners is true, block comments in the Code are removed. The default value is false.

If process is true, it is executed before merging.

SRC is an array. The elements in the array are the files to be merged, which are merged in the order of 0 to n. (Note the order of merging)

DeST is the Directory and file name of the merged file.

2. Multiple merge tasks

grunt.initConfig({  concat: {    one: {      src: [‘a.js‘],      dest: ‘all.js‘,    },    two: {      src: [‘b.js‘, ‘c.js‘],      dest: ‘all-sec.js‘,    },  },});

Two merge tasks, one and two, are defined here to generate two Merge files respectively.

Grunt Concat: One executes the first task, grunt Concat: Two executes the second task, and if it is only grunt Concat, both tasks are executed.

The following is another method, with the same effect as above

grunt.initConfig({  concat: {    basic_and_extras: {      files: {        ‘all.js‘: [‘a.js‘],        ‘all-sec‘: [‘b.js‘, ‘c.js‘],      },    },  },});

3. Dynamic file name

grunt.initConfig({  pkg: grunt.file.readJSON(‘package.json‘),  concat: {    dist: {      src: [‘a.js‘],      dest: ‘dist/<%= pkg.name %>-<%= pkg.version %>.js‘,    },  },});

The above is the most basic and common usage of the Concat plug-in. If you still don't understand it, go to the GitHub homepage of Concat to learn more.

Https://github.com/gruntjs/grunt-contrib-concat

? You can communicate with me if you cannot understand it.

Grunt tutorial 2-Concat plug-in