Tutorial to learn how to use grunt to package JavaScript and CSS programs

Grunt.js is an automated task runner based on Node.js. Grunt.js combined with NPM's package dependency management is completely comparable to Maven. Grunt.js is naturally suitable for building front-end applications - not only limited to JavaScript projects, but can also be used to build applications in other languages. An increasing number of JavaScript projects are already using Grunt, with the largest users including the famous jQuery project.

Grunt’s ecosystem is growing rapidly, and there are currently hundreds of plug-ins published on NPM to choose from. At the same time, anyone can easily publish their own plug-ins to NPM for others to use.

Grunt does not emphasize the build life cycle like Maven, and the execution order of various tasks can be configured at will. Grunt itself is just an executor, and a large number of functions exist in plugins managed by NPM. In particular, the core plug-ins starting with grunt-contrib- cover most of the core functions, such as handlebars, jade, less, compass, jshint, jasmine, clean, concat, minify, copy, uglify, watch, minify, uglify, etc.

By providing a common interface for tasks such as code specification checking (Lint), merging, compression, testing and version control, Grunt greatly lowers the entry barrier.

1. Install nodejs, grunt, and grunt plug-in

1. Install nodejs

Download address: https://nodejs.org/download/

2. Install grunt and plug-in

npm install grunt -g  //安装grunt,-g全局变量 
npm install grunt-cli -g //安装grunt命令行 
npm install grunt --save-dev  //安装grunt,--save-dev保存到安装目录 
npm install grunt-cli --save-dev //安装grunt命令行 
npm install grunt-contrib-jshint --save-dev //js语法检测插件 
npm install grunt-contrib-concat --save-dev //js合并插件 
npm install grunt-contrib-uglify --save-dev //js压缩插件 
npm install grunt-contrib-cssmin --save-dev //CSS压缩插件

Install grunt and grunt-cli, -g and --save-dev. It is recommended to do this to avoid errors.

3. Create the working directory

After the above installation is completed, node_modules will contain the plug-ins installed above. Install nodejs Copy the node_modules in the directory to the new directory, and create Gruntfile.js and package.json.
One thing to note here is that Gruntfile.js and package.json must be in the same directory as the node_modules, otherwise when calling An error will be reported when using the grunt plug-in, for example:

>> Local Npm module "grunt-contrib-uglify" not found. Is it installed?
Warning: Task "uglify" not found. Use --force to continue.

If you do not install the grunt-contrib-uglify plug-in, this error will also be reported.

2. Create Gruntfile.js and package.json

1, package.json

{ 
 "name": "jstest", 
 "file": "function", 
 "version": "0.1.0", 
 "devDependencies": { 
 "grunt": "~0.4.5", 
 "grunt-contrib-jshint": "~0.11.3", //后面的数字是版本号，从各个插件目录下的package.json能找到 
 "grunt-contrib-concat": "~0.5.1", 
 "grunt-contrib-uglify": "~0.9.2", 
 "grunt-contrib-cssmin": "~0.14.0" 
 } 
}

2, Gruntfile.js

module.exports = function (grunt) { 
 // grunt配置 
 grunt.initConfig({ 
 pkg: grunt.file.readJSON('package.json'), 
 concat: { 
  options: { 
  separator: ';' 
  }, 
  dist: { 
  src: ['js_s/function.js', 'js_s/jquery.validate.js'], 
  dest: 'js_d/main.js' //合并不压缩 
  } 
 }, 
 uglify: { 
  options: { 
  banner: '/*!   */\n' //文件顶部的注释，可自定义 
  }, 
  build: { //将package.json中的file对应的文件，进行压缩并重命名 
  src: 'js_s/.js',  //注意空格，官方配置例子是pkg.name 
  dest: 'js_d/.min.js' //注意空格，官方配置例子是pkg.name 
  }, 
  buildall: {//将js_s文件夹下的所有js文件，压缩后，放到js_d文件夹中，文件名不变 
  files: [{ 
  expand:true, 
  cwd:'js_s',//js目录下 
  src:'**/*.js',//所有js文件 
  dest: 'js_d'//输出到此目录下 
  }] 
  }, 
  hebin: {//将function.js和jquery.validate.js，合并,并压缩成main.min.js 
  files: { 
   'js_d/main.min.js': ['js_s/function.js', 'js_s/jquery.validate.js'] 
  } 
  }, 
  ymain: {//将main.js压缩成main1.min.js 
  src: 'js_d/main.js', 
  dest: 'js_d/main1.min.js' 
  } 
 }, 
 jshint: { //检查，function.js是不是有语法错误 
  all: ['js_s/function.js'] 
 }, 
 cssmin: { 
  combine: { 
    files: { //将css_s文件夹下的css文件合成一个 
     'css_d/main.css': ['css_s/*.css'] 
    } 
   }, 
  minify: { 
    options: { 
     keepSpecialComments: 0, /* 删除所有注释 */ 
     banner: '/* minified css file */' 
    }, 
    files: { //单个CSS文件压缩 
     'css_d/index.min.css': ['css_s/index.css'] 
    } 
   }, 
  test: {//按文件夹下的所有CSS文件，压缩后，放到新的文件夹中，文件名不变 
    files: [{ 
   expand:true, 
   cwd:'css_s',//css目录下 
   src:'**/*.css',//所有css文件 
   dest: 'css_d'//输出到此目录下 
   }] 
   } 
  } 
 }); 
 // 加载插件 
 grunt.loadNpmTasks('grunt-contrib-uglify'); 
 grunt.loadNpmTasks('grunt-contrib-concat'); 
 grunt.loadNpmTasks('grunt-contrib-jshint'); 
 grunt.loadNpmTasks('grunt-contrib-cssmin'); 
 
 // 是否调用插件功能 
 //grunt.registerTask('default', ['concat','uglify','jshint','cssmin']); 
 // grunt.registerTask('default', ['uglify']); 
 // grunt.registerTask('default', ['concat']); 
 //grunt.registerTask('default', ['jshint']); 
 grunt.registerTask('default', ['cssmin']); //CSSMIN插件的功能能用，其他功能都不起作用 
}

After the configuration file is ready, under the command line, Enter grunt to merge and compress. The above test files basically revolve around merging and compression. For those who are doing WEB front-end, this is quite important.
In terms of compression effect, the compression effect of JS is ideal, and that of CSS is average. Of course, it depends on the code written.

[Related tutorial recommendations]

1. JavaScript video tutorial
2. JavaScript online manual
3. bootstrap tutorial