我的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']);
}