Tutorial zum Erlernen der Verwendung von Grunt zum Packen von JavaScript- und CSS-Programmen

Grunt.js ist ein automatisierter Task-Runner, der auf Node.js basiert. Grunt.js ist in Kombination mit dem Paketabhängigkeitsmanagement von NPM vollständig mit Maven vergleichbar. Grunt.js eignet sich natürlich zum Erstellen von Frontend-Anwendungen – nicht nur beschränkt auf JavaScript-Projekte, sondern kann auch zum Erstellen von Anwendungen in anderen Sprachen verwendet werden. Immer mehr JavaScript-Projekte nutzen Grunt bereits, zu den größten Nutzern gehört das berühmte jQuery-Projekt.

Das Ökosystem von Grunt wächst schnell und es stehen derzeit Hunderte von auf NPM veröffentlichten Plug-ins zur Auswahl. Gleichzeitig kann jeder ganz einfach seine eigenen Plug-ins in NPM veröffentlichen, damit andere sie nutzen können.

Grunt legt nicht wie Maven Wert auf den Build-Lebenszyklus, und die Ausführungsreihenfolge verschiedener Aufgaben kann nach Belieben konfiguriert werden. Grunt selbst ist nur ein Executor, und in den von NPM verwalteten Plugins sind zahlreiche Funktionen vorhanden. Insbesondere die Kern-Plug-Ins, die mit grunt-contrib- beginnen, decken die meisten Kernfunktionen ab, wie z. B. handlebars, jade, less, Compass, jshint, jasmine, clean, concat, minify, copy, uglify, watch, minify, uglify , usw.

Durch die Bereitstellung einer gemeinsamen Schnittstelle für Aufgaben wie Codespezifikationsprüfung (Lint), Zusammenführen, Komprimieren, Testen und Versionskontrolle senkt Grunt die Einstiegshürde erheblich.

1. Installieren Sie nodejs, grunt und grunt plug-in

1. Installieren Sie nodejs

Download-Adresse: https://nodejs.org/download/

2. Grunt und Plug-in installieren

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压缩插件

Installieren Sie grunt und grunt-cli, -g und --save-dev. Es wird empfohlen, dies zu tun, um Fehler zu vermeiden.

3. Erstellen Sie das Arbeitsverzeichnis

Nachdem die obige Installation abgeschlossen ist, enthält node_modules die oben installierten Plug-Ins Verschieben Sie die node_modules im Verzeichnis in das neue Verzeichnis und erstellen Sie Gruntfile.js und package.json. Hierbei ist zu beachten, dass sich Gruntfile.js und package.json im selben Verzeichnis wie die node_modules befinden müssen, andernfalls beim Aufruf Bei Verwendung des Grunt-Plug-Ins wird ein Fehler gemeldet, zum Beispiel:

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

Wenn Sie das Grunt-Contrib-Uglify-Plug-In nicht installieren, wird dies angezeigt Der Fehler wird ebenfalls gemeldet.

2. Erstellen Sie Gruntfile.js und 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插件的功能能用，其他功能都不起作用 
}

Nachdem die Konfigurationsdatei fertig ist, unter der Befehlszeile , Geben Sie grunt ein, um zusammenzuführen und zu komprimieren. Bei den oben genannten Testdateien geht es im Wesentlichen um das Zusammenführen und Komprimieren. Für diejenigen, die WEB-Frontend verwenden, ist dies ziemlich wichtig.

In Bezug auf den Komprimierungseffekt ist der Komprimierungseffekt von JS ideal und der von CSS durchschnittlich. Dies hängt natürlich vom geschriebenen Code ab.

【Empfohlene verwandte Tutorials】

1.

JavaScript-Video-Tutorial2.
JavaScript-Online-Handbuch3.
Bootstrap-Tutorial