grunt基础
grunt是一个前端自动化工具，用于文件压缩、合并、错误检查等。
grunt是通过npm管理的，npm是nodejs的包管理器，所以安装grunt前要确保电脑安装了nodejs和npm。
安装过程
ps：通过npm安装很多系统需要sudo权限。
首先安装grunt的命令行CLI到全局
npm install -g grunt-cli
grunt-cli的作用是可以让多个版本的grunt同时存在(相当于grunt的一个构建工具)
grunt的核心就是Gruntfile.js文件的管理
我们创建一个项目目录，文件中要有两个文件
Gruntfile.js就是grunt执行的js，用于配置我们需要grunt执行哪些操作（js合并、检错等等）
package.json相当于一个项目管理文件（用于配置项目名字、版本、一些依赖包等等）
//package.json
{
"name": "project-name",
"version": "1.0.0",
"devDependencies": {
}
}
创建好项目目录后，我们在项目目录中安装grunt
npm install grunt --save-dev
这时我们在项目目录中会看到多了一个node_modules文件夹，文件夹中多了一个grunt文件夹，说明grunt已经安装成功
再看package.json中devDependencies对象中多了一条gurnt的配置，这就是-dev的作用（会把安装依赖包信息写到package.json中）
下面进行Gruntfile.js的配置
ps：再没有配置的情况下，终端输入grunt会有错误提示信息
下面先进行一个简单配置
module.exports = function(grunt){
grunt.initConfig({
pkg:grunt.file.readJSON('package.json')
})
grunt.registerTask('default',[]);
}
我们对package.json文件进行了一次read操作，这时候就没有报错了
这个过程可以忽略，下面进行gurnt插件安装和配置
uglify：用于js文件的压缩
插件安装：npm install grunt-contrib-uglify --save-dev
先搞一个测试文件：当前目录创建个src文件夹，文件夹中新建一个testJs.js文件，文件里随便写点js代码就行
然后配置Gruntfile.js文件
grunt.initConfig({
pkg:grunt.file.readJSON('package.json'),
uglify:{
options:{
stripBanners: true,
banner: '/*! <%=pkg.name%>-<%=pkg.version%>.js <%=grunt.template.today("yyyy-mm-dd")%> */\n'
},
build:{
src: 'src/testJs.js',
dest: 'bulid/<%=pkg.name%>-<%=pkg.version%>.js.min.js'
}
}
})
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.registerTask('default',['jshint']);
options中规定允许生成的压缩文件带banner，即在生成的压缩文件第一行加一句话说明
build中配置了输入输出文件的目录和名字
插件被安装后，要在在你的gruntfile.js中执行grunt.loadNpmTasks
grunt.registerTask是让插件立刻执行，第二参数是数组，用于gurnt插件的执行顺序
最终在目录中多了一个build文件夹，里面生产了一个testJS的压缩文件，内容如下
其他插件同理，直接放代码了
grunt.initConfig({
pkg:grunt.file.readJSON('package.json'),
uglify:{
options:{
stripBanners: true,
banner: '/*! <%=pkg.name%>-<%=pkg.version%>.js <%=grunt.template.today("yyyy-mm-dd")%> */\n'
},
build:{
src: 'src/testJs.js',
dest: 'bulid/<%=pkg.name%>-<%=pkg.version%>.js.min.js'
}
},
jshint:{
options:{
jshintrc:'.jshintrc'
},
build:['Gruntfile.js','src/*.js']
},
watch:{
build:{
files:['src/*.js','src/*.css'],
tasks:['jshint','uglify'],
options:{spawn:false}
}
}
})
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default',['jshint','uglify','watch']);
其中watch插件用于监听，当我们保存代码时，watch会自动执行（不用每次在终端输入grunt了）
ps
- Contrib-jshint——javascript语法错误检查；
- Contrib-watch——实时监控文件变化、调用相应的任务重新执行；
- Contrib-clean——清空文件、文件夹；
- Contrib-uglify——压缩javascript代码
- Contrib-copy——复制文件、文件夹
- Contrib-concat——合并多个文件的代码到一个文件中
- karma——前端自动化测试工具
