grunt
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了grunt相关的知识，希望对你有一定的参考价值。
grunt能够自动执行配置好的任务
命令行：
切换根目录直接： f:
切换路径 cd cw
返回上一层 cd..
安装使用grunt：
npm install -g grunt-cli 安装
注意，安装grunt-cli并不等于安装了 Grunt！Grunt CLI的任务很简单：调用与Gruntfile在同一目录中 Grunt。每次运行grunt 时，他就利用node提供的require()系统查找本地安装的 Grunt。正是由于这一机制，你可以在项目的任意子目录中运行grunt
取消操作 ctrl c
package.json(此文件被npm用于存储项目的元数据，以便将此项目发布为npm模块。你可以在此文件中列出项目依赖的grunt和Grunt插件，放置于devDependencies配置段内。):
在package.json所在目录中运行npm install将依据package.json里指定的node依赖
{
"name": "my-project-name",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-jshint": "~0.6.0",
"grunt-contrib-nodeunit": "~0.2.0",
"grunt-contrib-uglify": "~0.2.2"
}
}
下面这条命令将安装Grunt最新版本到项目目录中，并将其添加到devDependencies内：
npm install grunt --save-dev
想用某个插件，先要添加依赖并然后安装好，才能在Gruntfile中加载使用。
Gruntfile(用来配置或定义任务（task）并加载Grunt插件的)组成结构：
接下来就可以定义每个任务的配置信息，每一个任务的配置对象作为grunt.initConfig({})的属性:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON(‘package.json‘), // 从package.json中读取配置内容，然后就可以 pkg.version 来读取里面信息
concat: { //这里就定义了一个合并任务了
options: {
separator: ‘;‘ //合并后每个被合并的文件之间的分割符号
},
dist: {
src: [‘src/**/*.js‘], //需要合并的文件,foo/*.js将匹配位于foo/目录下的所有的.js结尾的文件；而foo/**/*js将匹配foo/目录以及其子目录中所有以.js结尾的文件
dest: ‘dist/<%= pkg.name %>.js‘ //合并后的文件存放地址
}
},
uglify: { //这是另一个压缩任务
options: {
banner: ‘/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n‘ //这段将插入到输出内容头部
},
dist: {
files: {
‘dist/<%= pkg.name %>.min.js‘: [‘<%= concat.dist.dest %>‘] //把上面合并后的文件压缩到dist/地址下
}
}
},
qunit: {
files: [‘test/**/*.html‘] //测试运行的文件
},
jshint: {
files: [‘Gruntfile.js‘, ‘src/**/*.js‘, ‘test/**/*.js‘], //定义需要语法质量检测的文件
options: {
globals: { //这里可以覆盖掉jshint默认的选项,http://www.jshint.com/docs/
jQuery: true,
console: true,
module: true,
document: true
}
}
},
watch: { //监视任务，这里是监视和jshint相同的文件，如果这些文件发生了改变
files: [‘<%= jshint.files %>‘], //它就会自动运行task里面指定的任务，按照出现的顺序执行
tasks: [‘jshint‘, ‘qunit‘]
}
}); grunt.loadNpmTasks(‘grunt-contrib-uglify‘); //加载插件，这样上面才能完成uglify任务
grunt.loadNpmTasks(‘grunt-contrib-jshint‘);
grunt.loadNpmTasks(‘grunt-contrib-qunit‘);
grunt.loadNpmTasks(‘grunt-contrib-watch‘);
grunt.loadNpmTasks(‘grunt-contrib-concat‘);
grunt.registerTask(‘test‘, [‘jshint‘, ‘qunit‘]); //需要执行这个任务的话，执行grunt test
grunt.registerTask(‘default‘, [‘jshint‘, ‘qunit‘, ‘concat‘, ‘uglify‘]); //默认被执行的任务，也就是只输入grunt的时候执行
};grunt --help 命令将列出所有可用的任务。
任务配置和目标：
grunt.initConfig({
concat: {
options: {
// 这里是任务级的Options，覆盖默认值 ,option是可选的
},
foo: { //这时concat下的foo目标，如果需要只运行它，可以：grunt concat:foo
options: {
// 目标可以有option，会覆盖上一级
},
},
bar: {
// 不指定option的话，会使用上一级的option
},
},
});
以上是关于grunt的主要内容，如果未能解决你的问题，请参考以下文章