Tutoriel pour apprendre à utiliser Grunt pour packager des programmes JavaScript et CSS

Grunt.js est un exécuteur de tâches automatisé basé sur Node.js. Grunt.js combiné à la gestion des dépendances des packages de NPM est tout à fait comparable à Maven. Grunt.js est naturellement adapté à la création d'applications frontales - non seulement limité aux projets JavaScript, mais peut également être utilisé pour créer des applications dans d'autres langages. Un nombre croissant de projets JavaScript utilisent déjà Grunt, les plus grands utilisateurs comprenant le célèbre projet jQuery.

L'écosystème de Grunt se développe rapidement et il existe actuellement des centaines de plug-ins publiés sur NPM parmi lesquels choisir. Dans le même temps, n’importe qui peut facilement publier ses propres plug-ins sur NPM pour que d’autres puissent les utiliser.

Grunt ne met pas l'accent sur le cycle de vie de la construction comme Maven, et l'ordre d'exécution des différentes tâches peut être configuré à volonté. Grunt lui-même n'est qu'un exécuteur, et un grand nombre de fonctions existent dans les plugins gérés par NPM. En particulier, les plug-ins principaux commençant par grunt-contrib- couvrent la plupart des fonctions principales, telles que handlebars, jade, less, compass, jshint, jasmine, clean, concat, minify, copy, uglify, watch, minify, uglify. , etc.

En fournissant une interface commune pour des tâches telles que la vérification des spécifications de code (Lint), la fusion, la compression, les tests et le contrôle de version, Grunt abaisse considérablement la barrière d'entrée.

1. Installez nodejs, grunt et le plug-in grunt

1. Installez nodejs

Adresse de téléchargement : https://nodejs.org/download/

2. Installez Grunt et le 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压缩插件

Installez grunt et grunt-cli, -g et --save-dev Il est recommandé de le faire pour éviter les erreurs.

3. Créez le répertoire de travail

Une fois l'installation ci-dessus terminée, node_modules contiendra les plug-ins installés ci-dessus. Installez nodejs Copy. les node_modules dans le répertoire vers le nouveau répertoire, et créez Gruntfile.js et package.json
Une chose à noter ici est que Gruntfile.js et package.json doivent être dans le même répertoire que node_modules, sinon lors de l'appel. Une erreur sera signalée lors de l'utilisation du plug-in grunt, par exemple :

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

Si vous n'installez pas le plug-in grunt-contrib-uglify, ceci l’erreur sera également signalée.

2. Créez Gruntfile.js et 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插件的功能能用，其他功能都不起作用 
}

Une fois le fichier de configuration prêt, sous la ligne de commande , Entrez grognement pour fusionner et compresser. Les fichiers de test ci-dessus tournent essentiellement autour de la fusion et de la compression. Pour ceux qui utilisent le front-end WEB, c'est très important.
En termes d'effet de compression, l'effet de compression de JS est idéal, et celui de CSS est moyen. Bien sûr, cela dépend du code écrit.

【Tutoriels associés recommandés】

1 Tutoriel vidéo JavaScript
2 Manuel en ligne JavaScript
3. Tutoriel bootstrap