Use Grunt for js and css compression and merging

1. Create a new package. json. After the configuration is complete, use npminstall for installation. Use npminit to create a package. jsonpackage. json in the root directory, which contains metadata about the project, such as the project name, description, version number, and plug-in. It should be submitted to svn or git like the source code. Example: {name: cyjs, version: 0.

1. Create a new package. json. After the configuration is complete, use npm install to install the package. Use npm init to create a package. json package. json in the root directory, which contains metadata about the project, such as the project name, description, version number, and plug-in. It should be submitted to svn or git like the source code. Example: {name: cyjs, version: 0.

1. Create a new package. json. After the configuration is complete, use npm install to install the package.

Use npm init to create package. json

Package. json is placed under the root directory, which contains metadata about the project, such as the project name, description, version number, and plug-in. It should be submitted to svn or git like the source code.
Example:

{    "name": "cyjs",    "version": "0.1.0",    "description": "js for k68.org",    "homepage": "http://www.k68.org/",    "author": "firebaby",    "devDependencies": {      "grunt": "~0.4.1",      "grunt-contrib-jshint": "~0.3.0",      "grunt-contrib-concat": "~0.1.1",      "grunt-contrib-uglify": "~0.1.2",      "grunt-contrib-cssmin": "~0.5.0",      "grunt-htmlhint": "~0.9.2"    }}

• Grunt-contrib-jshint (js syntax check)
• Grunt-contrib-concat (js merge)
• Grunt-contrib-uglify (use UglifyJS to compress js)
• Grunt-contrib-cssmin (Css compression and merging)
• Grunt-htmlhint (html syntax check)

These are common plug-ins. For more plug-ins, visit: http://gruntjs.com/plugins

Install the plug-in the project directory as follows:
Install: uglify

npm install grunt-contrib-uglify

Installation: cssmin

npm install grunt-contrib-cssmin

After the plug-in is installed, check the root directory and find that the node_modules directory contains the corresponding plug-in directory.

Ii. Create Gruntfile. js

Gruntfile. js consists of the following content
1. wrapper function. The structure is as follows. This is a typical method of Node. js. Open APIs using exports

  module.exports = function(grunt) {      // Do grunt-related things in here    }

2. Project and task Configuration

3. Load the grunt plug-in and task
4. Custom task execution

Example:

Module. exports = function (grunt) {// configure the grunt parameter. initConfig ({pkg: grunt. file. readJSON ('package. json '), concat: {options: {separator:'; ', stripBanners: true}, dist: {src: ["js/config. js "," js/smeite. js "," js/index. js "], dest:" assets/js/default. js "}}, uglify: {options :{}, dist: {files: {'Assets/js/default. min. js': 'Assets/js/default. js' }}, cssmin: {options: {keepSpecialComments: 0}, compress: {files: {'Assets/css/default.css ': ["css/global.css ", "css/pops.css", "css/index.css"] }}}); // load the concat and uglify plug-ins for merging and compressing grunt, respectively. loadNpmTasks ('grunt-contrib-concat'); grunt. loadNpmTasks ('grunt-contrib-uglify '); grunt. loadNpmTasks ('grunt-contrib-cssmin'); // register the task grunt. registerTask ('default', ['concat', 'uglify ', 'cssmin']);}

Grunt api documentation: http://gruntjs.com/api/grunt

3. Execute the grunt task through the command line

Go to the project root directory and click:

grunt

The files configured by Gruntfile are compressed and merged.

You can also execute this command separately, for example, run the js compression command:

grunt uglify

Css compression command

grunt cssmin

Refer:
Http://www.cnblogs.com/snandy/archive/2013/03/11/2949177.html
Http://my.oschina.net/smeite/blog/119351

Scan the QR code below your mobile phone and follow the official website.