使用grunt构建前端项目
1. grunt构建工具是基于nodejs上的，所以在使用之前一定要先安装好nodejs
2. 安装好nodejs后，node -v查看node版本 npm-v 查看npm版本信息
3. 在需要用到的项目文件下安装grunt，安装命令 ：npm install grunt ，安装之后无法执行grunt命令，需安装一个全局的grunt-cli ( grunt命令操作 ) 安装命令：npm install -g grunt-cli，再使用 grunt --version 查看grunt-cli版本
4.将需要使用到的插件通过npm 命令安装到本地
5. 安装完成之后，首先需新建一个package.json文件，可以选择在项目根目录下手动创建package.json的文件，也可以选择使用npm init命令进行创建：
当通过npm install grunt-contrib-cssmin -save-dev 命令时，将会把grunt-contrib-cssmin 添加到package.json中的devDependencies中
其次还需要一个Gruntfile.js的文件，其中配置信息如下：(使用各种插件)
module.exports = function (grunt) {
//任务配置，所有插件的配置信息
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),//获取到package.json文件的信息
uglify: {//uglify压缩插件的配置信息
options: {//压缩之后,压缩文件中的描述信息
striBanners: true,
banner: '/*! <%=pkg.name%>-<%=pkg.version%>.js <%=grunt.template.today("yyyy-mm-dd")%> */\n'
},
build: {
//目标文件
src: 'js/index.js',
//压缩后的文件
dest: 'build/<%=pkg.name%>-<%=pkg.version%>.js.min.js'
}
},
jshint: {//使用jshint查看js代码中出现的错误，以及可能存在的一些问题
build: ['Gruntfile.js', 'js/index.js'],
options: {
jshintrc: '.jshintrc'
}
},
watch: {//使用watch事实监控文件，实现自动化
build: {
files: ['js/index.js', 'css/index.css'],
tasks: ['jshint', 'uglify'],
options: {spawn: false}
}
}，
cssmin: {
options ：{
shorthandConpacting:false,
roundingPrecision:-1
}，
target : {
files :{
'合并后.css':['合并1.css','合并2.css','合并3.css']
}
}
}
});
//使用grunt插件
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-watch');
//输入grunt命令时需要做哪些(顺序)
grunt.registerTask('default', [ 'uglify', 'jshint', 'watch']);
};
常用的几种grunt插件:
- Contrib-jshint——javascript语法错误检查；
- Contrib-watch——实时监控文件变化、调用相应的任务重新执行；
- Contrib-clean——清空文件、文件夹；
- Contrib-uglify——压缩javascript代码
- Contrib-copy——复制文件、文件夹
- Contrib-concat——合并多个文件的代码到一个文件中
- Contrib-cssmin——压缩css代码
- karma——前端自动化测试工具
grunt.initConfig方法:
用于模块配置，它接受一个对象作为参数。该对象的成员与使用的同名模块一一对应。
每个目标的具体设置，需要参考该模板的文档。就cssmin来讲，minify目标的参数具体含义如下：
expand：如果设为true，就表示下面文件名的占位符（即*号）都要扩展成具体的文件名。
cwd：需要处理的文件（input）所在的目录。
src：表示需要处理的文件。如果采用数组形式，数组的每一项就是一个文件名，可以使用通配符。
dest：表示处理后的文件名或所在目录。
ext：表示处理后的文件后缀名。
grunt常用函数说明：
grunt.initConfig：定义各种模块的参数，每一个成员项对应一个同名模块。grunt.initConfig({});
grunt.loadNpmTasks：加载完成任务所需的模块。grunt.loadNpmTasks("grunt-contrib-jshint");
grunt.registerTask：定义具体的任务。第一个参数为任务名，第二个参数是一个数组， 表示该任务需要依次使用的模块('defualt',['uglify','cssmin','jshint','watch']);
执行命令
在窗口执行命令 grunt
