Tutorial untuk mengetahui cara menggunakan grunt untuk membungkus program JavaScript dan CSS

Grunt.js ialah pelari tugas automatik berdasarkan Node.js. Grunt.js digabungkan dengan pengurusan pergantungan pakej NPM adalah setanding sepenuhnya dengan Maven. Grunt.js sememangnya sesuai untuk membina aplikasi bahagian hadapan - bukan sahaja terhad kepada projek JavaScript, tetapi juga boleh digunakan untuk membina aplikasi dalam bahasa lain. Semakin banyak projek JavaScript sudah menggunakan Grunt, dengan pengguna terbesar termasuk projek jQuery yang terkenal.

Ekosistem Grunt berkembang pesat, dan pada masa ini terdapat ratusan pemalam yang diterbitkan di NPM untuk dipilih. Pada masa yang sama, sesiapa sahaja boleh menerbitkan pemalam mereka sendiri ke NPM dengan mudah untuk digunakan oleh orang lain.

Grunt tidak menekankan kitaran hayat binaan seperti Maven, dan susunan pelaksanaan pelbagai tugas boleh dikonfigurasikan sesuka hati. Grunt itu sendiri hanyalah pelaksana, dan sejumlah besar fungsi wujud dalam pemalam yang diuruskan oleh NPM. Khususnya, pemalam teras bermula dengan grunt-contrib- meliputi kebanyakan fungsi teras, seperti hendal, jed, less, kompas, jshint, jasmine, clean, concat, minify, copy, uglify, watch, minify, uglify , dsb.

Dengan menyediakan antara muka biasa untuk tugasan seperti semakan spesifikasi kod (Lint), penggabungan, pemampatan, ujian dan kawalan versi, Grunt merendahkan sekatan kemasukan dengan sangat baik.

1. Pasang nodejs, grunt dan grunt plug-in

1. Pasang nodejs

Alamat muat turun: https://nodejs.org/download/

2 Pasang grunt dan pemalam

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

Pasang grunt dan grunt-cli, -g dan --save-dev Adalah disyorkan untuk melakukan ini untuk mengelakkan ralat.

3. Cipta direktori kerja

Selepas pemasangan di atas selesai, node_modules akan mengandungi pemalam yang dipasang di atas node_modules dalam direktori ke direktori baharu, dan buat Gruntfile.js dan package.json
Satu perkara yang perlu diperhatikan di sini ialah Gruntfile.js dan package.json mesti berada dalam direktori yang sama dengan node_modules, jika tidak apabila memanggil. Ralat akan dilaporkan apabila menggunakan pemalam grunt, contohnya:

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

Jika anda tidak memasang pemalam grunt-contrib-uglify, ini ralat juga akan dilaporkan.

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

Selepas fail konfigurasi sedia, di bawah baris arahan , Masukkan grunt untuk bergabung dan memampatkan. Fail ujian di atas pada asasnya berkisar pada penggabungan dan pemampatan Bagi mereka yang melakukan bahagian hadapan WEB, ini agak penting.
Dari segi kesan mampatan, kesan mampatan JS adalah ideal, dan CSS adalah purata, ia bergantung pada kod yang ditulis.

【Tutorial berkaitan yang disyorkan】

1 Tutorial video JavaScript
2 Manual dalam talian JavaScript
3. tutorial bootstrap