JavaScript Project Build tool Grunt practice: Merge files

GruntIs a task-basedJavaScriptThe project command line build tool runs on the Node. js platform.GruntYou can quickly create projects from templates, merge, compress, and verify CSS & JS files, run unit tests, and start static servers. The previous article Grunt: a task-based JavaScript Project Build tool introduces Grunt's steps for installing and creating a project framework. This article describes how to use Grunt to merge files.

 

　　

 

Grunt has built-in concat (File merging), lint (code verification), and min (Code compression) tasks. After the grunt. js file is configured, runGruntCommand to automatically complete a series of project building operations, as shown in:

 

　　

 

The corresponding Grunt configuration file code is as follows:

/*global module:false*/module.exports = function(grunt) {  // Project configuration.  grunt.initConfig({    pkg: '<json:GruntDemo.jquery.json>',    meta: {      banner: '/*! <%= pkg.title || pkg.name %> - v<%= pkg.version %> - ' +        '<%= grunt.template.today("yyyy-mm-dd") %>\n' +        '<%= pkg.homepage ? "* " + pkg.homepage + "\n" : "" %>' +        '* Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author.name %>;' +        ' Licensed <%= _.pluck(pkg.licenses, "type").join(", ") %> */'    },    concat: {      dist: {        src: ['<banner:meta.banner>', '<file_strip_banner:src/<%= pkg.name %>.js>'],        dest: 'dist/<%= pkg.name %>.js'      }    },    min: {      dist: {        src: ['<banner:meta.banner>', '<config:concat.dist.dest>'],        dest: 'dist/<%= pkg.name %>.min.js'      }    },    qunit: {      files: ['test/**/*.html']    },    lint: {      files: ['grunt.js', 'src/**/*.js', 'test/**/*.js']    },    watch: {      files: '<config:lint.files>',      tasks: 'lint qunit'    },    jshint: {      options: {        curly: true,        eqeqeq: true,        immed: true,        latedef: true,        newcap: true,        noarg: true,        sub: true,        undef: true,        boss: true,        eqnull: true,        browser: true      },      globals: {        jQuery: true      }    },    uglify: {}  });  // Default task.  grunt.registerTask('default', 'lint qunit concat min');};

This article first introduces the concat task, which will be introduced in subsequent articles.

Merge Grunt files

The built-in concat tasks of Grunt are used to merge one or more files (or commands, such as <banner> commands) into one file. Project configuration framework of the concat task:

// Project configuration grunt. initConfig ({// project metadata, used for <banner> command meta :{}, // list of files to be merged concat :{}});

Basic usage

Merge the intro. js, projject. js, and outro. js files under the src directory into the built. js files and place them in the dist directory. Configuration example:

grunt.initConfig({  concat: {    dist: {      src: ['src/intro.js', 'src/project.js', 'src/outro.js'],      dest: 'dist/built.js'    }  }});

Add Comment

You can also use the <banner> command to add comments to the merged file, such as the package name, version, and generation time. Sample Code:

grunt.initConfig({  pkg: '<json:package.json>',  meta: {    banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +      '<%= grunt.template.today("yyyy-mm-dd") %> */'  },  concat: {    dist: {      src: ['<banner>', '<file_strip_banner:src/project.js>'],      dest: 'dist/built.js'    }  }});

Multiple Build targets

In a project, multiple target files are often generated based on the module. For example, the basic module and plug-in template are packaged separately. Configuration example:

grunt.initConfig({  concat: {    basic: {      src: ['src/main.js'],      dest: 'dist/basic.js'    },    extras: {      src: ['src/main.js', 'src/extras.js'],      dest: 'dist/with_extras.js'    }  }});

Dynamic file name

The Grunt merge task can also generate dynamic file names,

grunt.initConfig({  pkg: '<json:package.json>',  dirs: {    src: 'src/files',    dest: 'dist/<%= pkg.name %>/<%= pkg.version %>'  },  concat: {    basic: {      src: ['<%= dirs.src %>/main.js'],      dest: '<%= dirs.dest %>/basic.js'    },    extras: {      src: ['<%= dirs.src %>/main.js', '<%= dirs.src %>/extras.js'],      dest: '<%= dirs.dest %>/with_extras.js'    }  }});

After configuration, run the following command to merge files:

grunt concat

The combined code example is as follows:

/*! Gruntdemo - v0.1.0 - 2013-01-22* https://github.com/dreamsky/grunt-demo* Copyright (c) 2013 Andy Li; Licensed MIT */(function($) {  // Collection method.  $.fn.awesome = function() {    return this.each(function() {      $(this).html('awesome');    });  };  // Static method.  $.awesome = function() {    return 'awesome';  };  // Custom selector.  $.expr[':'].awesome = function(elem) {    return elem.textContent.indexOf('awesome') >= 0;  };}(jQuery));

Articles you may be interested in

• Classic jQuery image carousel plug-in
• Well-selected excellent jQuery Ajax paging plug-ins
• Ten carefully selected online CSS3 code generation tools
• 13 sets of exquisite webpage icons
• 10 sets of exquisite free website background management system templates

 

Link: Grunt: a task-based JavaScript project command line build tool

Source: Dream sky ◆ focus on front-end development technology ◆ share web design resources