grunt安装和使用教程

grunt的安装

npm intall -g grunt-cli

新建文件夹grunt，在本地文件中添加package.json和Gruntfile.js文件，其中package.json文件的配置如下

//package.json
{
"name": "grunt",
"version": "0.1.0",
"description": "demo",
"license": "MIT",
"devDependencies": {
}
}

本地安装 npm install grunt-cli --save-dev 

//package.json
{
"name": "grunt",
"version": "0.1.0",
"description": "demo",
"license": "MIT",
"devDependencies": { "grunt": "^1.0.1"}}

安装grunt插件

grunt-contrib-concat合并两个文件 

grunt-contrib-uglify文件压缩插件

grunt-contrib-jshint js代码错误检测

grunt-contrib-watch 监控

//package.json 安装插件后
{
"name": "grunt",
"version": "0.1.0",
"description": "demo",
"license": "MIT",
"devDependencies": {
"grunt": "^1.0.1",
"grunt-contrib-concat": "^1.0.1",
"grunt-contrib-jshint": "^1.1.0",
"grunt-contrib-uglify": "^2.0.0"
}
}

Gruntfile.js的配置

module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
//grunt.file.readJSON('package.json') 将存储在package.json文件中的JSON元数据引入到grunt config中。 由于<% %>模板字符串可以引用任意的配置属性，因此可以通过这种方式来指定诸如文件路径和文件列表类型的配置数据，从而减少一些重复的工作
//如下表示的是在压缩的代码前添加表头以项目的name 年月日构成
options: { banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */
' },
build: { src: 'src/<%= pkg.name %>.js', dest: 'build/<%= pkg.name %>.min.js' }
}
});
// 加载包含 "uglify" 任务的插件。
grunt.loadNpmTasks('grunt-contrib-uglify');
// 默认被执行的任务列表。
grunt.registerTask('default', ['uglify']); };

执行以后如下图

压缩的文件的表头为 /*! grunt 2017-01-02 */

jshint

新建文件为 .jshintrc 其内容根据要检查的js决定，具体的js的检验可以在深入学习这里只是举了几个例子

{
//curly 表示所有的代码块必须使用大括号
“curly”: true,
eqeqeq 表示判断相等时，必须使用 ===
“eqeqeq”: true,
immed 表示立即执行函数必须用括号包起来 (function () { } ());
“immed”: true,
noarg 表示禁止使用 arguments.caller和arguments.callee
“noarg”: true,
noempty 表示禁止出现空的代码块 { }
“noempty”: true,
//quotmark 是引号的使用规则，有以下四个选项
//false : 不检查
//true : 检查一致性（要么都是单引号，要么都是双引号）
//single : 必须都是单引号
//double : 必须都是双引号
“quotmark”: “single”,
//undef 表示所有的局部变量都必须先声明再使用
“undef”: true,
//unused 表示禁止变量已经声明，但却不使用
“unused”: true,
//node 表明你的项目是NodeJS项目，require等node特有的全局函数将通过检查
“node”: true
}

module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */
'
},
build: {
src: 'src/bbb.js',
dest: 'build/<%= pkg.name %>-<%=pkg.version %>.min.js'
}
},
jshint: {
files: ['Gruntfile.js', 'src/bbb.js'],
options: {
jshintrc:'.jshintrc'
}
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.registerTask('default', ['jshint', 'uglify']);
};

concat

/**
* Created by lenovo on 2017/1/2.
*/
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */
'
},
build: {
src: 'src/bbb.js',
dest: 'build/<%= pkg.name %>-<%=pkg.version %>.min.js'
}
},
jshint: {
files: ['Gruntfile.js', 'src/bbb.js'],
options: {
jshintrc:'.jshintrc'
}
},
concat: {
options: {
separator: ';'
},
dist: {
src: ['src/*.js'],
dest: 'dist/<%= pkg.name %>.js'
}
},
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.registerTask('default', ['jshint', 'uglify','concat']);
};