我的Grunt之旅-初识gruntfile文件

时间：2018-03-06 18:23  事件：配置 gruntfile.js文件

　　首先，回忆一下之前的点，grunt项目下面必须有两个文件  ，第一个  package.json ，第二个  Gruntfile.js。其中，package.json文件中可以列举一些需要用的grunt插件（说明：https://docs.npmjs.com/files/package.json）。

　　cmd窗口进入grunt项目目录，最好自己先弄一份package文件，不要用系统自己生成的，列举出需要的 grunt插件，然后执行命令  npm install  ，这是，会自动安装package文件中列举的插件。

　　插件安装完成之后，开始做准备工作，首先准备一个src文件夹，里面放置 三个js（等会儿要合并）。

　　打开Gruntfile文件开始配置。 如下

　　module.exports = function(grunt) {

　　　　grunt.initConfig({

　　　　　　//配置都写在这里面，

　　　　　　//首先读取项目配置信息，都在package文件中

　　　　　　pkg: grunt.file.readJSON('package.json'),

　　　　　　//使用contact配置为任务定义相对应的配置（我们这里的任务是合并三个js文件，相关的 属性的定义可以查看对应的grunt文档）

　　　　　　concat:{
　　　　　　　　options:{
　　　　　　　　　　//定义一个用于输入合并文件之间的字符
　　　　　　　　　　separator:';'
　　　　　　　　},
　　　　　　　　dist:{
　　　　　　　　　　//将要被合并的文件的目录以及文件类型
　　　　　　　　　　src:['src/**/*.js'],
　　　　　　　　　　//合并后文件的放置位置及合并后文件的名称（pkg.name  就是 package文件中的name属性，前面已经读取package文件了 pkg: grunt.file.readJSON('package.json'),所以可以用pkg.name）
　　　　　　　　　　dest:'dist/<%= pkg.name %>'
　　　　　　　　}
　　　　　　},

　　　　　　//任务的配置设定好之后，来执行任务 使用uglify来执行

　　　　　　uglify: {
　　　　　　　　options: {
　　　　　　　　　　// 此处定义的banner注释将插入到输出文件的顶部
　　　　　　　　　　banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
　　　　　　　　},
　　　　　　　　dist:{
　　　　　　　　　　files:{

　　　　　　　　　　　　//dist执行合并操作，

　　　　　　　　　　　　'dist/<%= pkg.name %>.min.js':['<%= concat.dist.dest %>']
　　　　　　　　　　}
　　　　　　　　}
　　　　　　},

　　　　　　//使用jshint检查一下js的语法和风格

　　　　　　jshint:{
　　　　　　　　files:'src/**/*.js',//files后面也可以跟数组比如 files:['src/**/*.js','Gruntfile.js']
　　　　　　　　options:{
　　　　　　　　　　globals:{

　　　　　　　　　　　　//这里是一些更改默认配置的操作，如果使用默认配置，可以不做任何操作

　　　　　　　　　　　　jQuery: true,
　　　　　　　　　　}
　　　　　　　　}
　　　　　　}

　　　　})；

　　　　// 加载包含 "uglify" 任务的插件。

　　　　grunt.loadNpmTasks('grunt-contrib-uglify');
　　　　grunt.loadNpmTasks('grunt-contrib-jshint');
　　　　grunt.loadNpmTasks('grunt-contrib-concat');

　　　　// 自定义一个test的任务，可以使用 grunt test 命令来执行，

　　　　grunt.registerTask('test', ['jshint']);  //数组里面代表着test任务将要执行的操作 这里执行的检查操作

　　　　// 默认被执行的任务列表。  default  任务是默认任务  ，可以直接使用 grunt 命令来执行 
　　　　grunt.registerTask('default', ['jshint', 'concat', 'uglify']);

　　}