grunt

官网：https://gruntjs.com/getting-started
Grunt 的基本套装

grunt自家利器：（grunt官方维护的插件）

包名称 说明
contrib-watch 监视文件的变化，可以指定发生变化时执行的任务
contrib-clean 清楚指定目录下的文件
contrib-jshint js语法规范提示，可以将规范写入配置文件，对不符合规范的代码予以提示
contrib-copy 拷贝文件到指定目录
contrib-uglify 压缩指定的js代码
contrib-concat 合并指定的js or css代码
contrib-cssmin 压缩指定的css代码
contrib-less 将less文件编译为css
contrib-htmlmin 压缩指定的html代码
contrib-imagemin 压缩指定的图片

grunt和前端模块管理工具的简单使用 https://segmentfault.com/a/1190000002779266?utm_source=tuicool

1).grunt-contrib-uglify：压缩js代码
2).grunt-contrib-concat：合并js文件
3).grunt-contrib-qunit：单元测试
4).grunt-contrib-jshint：js代码检查
5).grunt-contrib-watch：文件监控

package.json和Gruntfile.js
package.json主要用于Node.js的包管理，比如Grunt插件安装；
Gruntfile.js是Grunt配置文件，配置任务或者自定义任务。

这两个文件必须放在项目的根目录，并且和项目文件一起提交

安装package.json
我们可以在终端通过npm init命令自动创建一个基本的package.json文件；可以直接使用package.json文件模板：

{
“name”:“项目名称”,
“version”:“项目版本号”,
“description”:“项目描述”,
“author”:“项目创建者”,
“license”:“项目版权”,
“devDependencies”: {
//项目依赖插件
}
}
注：

Dependencies可选字段，指示当前包所依赖的其他包。

devDependencies可选字段。如果只需要下载使用某些模块，而不下载这些模块的测试和文档框架，放在这个下面比较不错。
在package.json中最重要的就是name和version字段。他们都是必须的，如果没有就无法install。

package.json的用法
description：放简介，字符串。方便我们在npm search中搜索。

keywords：关键字，数组、字符串。还是方便我们在npm search中搜索。

main：该字段是一个模块ID，它是一个指向你程序的主要项目。就是说，如果你包的名字叫foo，然后用户安装它，然后require(“foo”)，然后你的main模块的exports对象会被返回。

scripts：这是一个由脚本命令组成的hash对象，他们在包不同的生命周期中被执行。key是生命周期事件，value是要运行的命令。
其余可以参照：https://github.com/ericdum/mu…

安装gruntfile.js文件
我们可以通过grunt-init来创建gruntfile.js文件，也可以通过以下模板手工创建：

module.exports = function(grunt) {
// 给grunt添加些设置
grunt.initConfig({
uglify: {
options: {
banner: ‘/! 版权所有，这里乱写 /n’
},
build: { src: ‘src/core.js’, //要压缩的源文件，我们也可以用表示通配，比如’src/.js’
dest: ‘dst/core.js’,//压缩后输出的位置，由于是在根目录，所以直接起个文件名就行
}
}
});
// 载入 “uglify” 插件任务
grunt.loadNpmTasks(‘grunt-contrib-uglify’);//引号内部为插件名

//定义默认需要执行的任务
grunt.registerTask(‘default’, [‘uglify’]);//uglify就是grunt任务
};

安装插件：
可以手动在package.json中添加Grunt的插件，也可以通过以下命令的方式向package.json文件中添加：

$ sudo npm install grunt插件名 --save-dev
实例：用Grunt进行压缩js代码
grunt-contrib-uglify是Grunt.js的一个任务模块，其基于著名的js压缩工具uglify，进行js压缩任务。

首先我们在项目依赖加上grunt-contrib-uglify。首先cd命令进入一个文件夹，然后安装该插件：

$ sudo npm install grunt-contrib-uglify --save-dev

在该文件夹根目录创建package.json文件如下：

{
“name”: “test”,
“version”: “0.1.0”,
“devDependencies”: {
“grunt”: “~0.4.1”,
“grunt-contrib-uglify”: “~0.2.0”
}
}
或者你也可以直接在终端输入npm init命令来安装。

接着输入npm install 命令来安装，你就会在项目根目录生成一个名为node_modules的文件夹，里面包含grunt和你安装的grunt插件

接着写gruntfile.js文件，你可以手工新建一个名为gruntfile.js的文件，也可以在终端输入grunt-init来创建

gruntfile.js的文件源码如下

module.exports = function(grunt) {
// 给grunt添加些设置
grunt.initConfig({
uglify: {
options: {
banner: ‘/! 版权所有，这里乱写 /n’
},
build: { src: ‘jquery-1.9.1.js’, //要压缩的源文件，我们也可以用表示通配，比如’src/.js’
dest: ‘jquery-1.9.1.min.js’,//压缩后输出的位置，由于是在根目录，所以直接起个文件名就行
}
}
});
// 载入 “uglify” 插件任务
grunt.loadNpmTasks(‘grunt-contrib-uglify’);//引号内部为插件名

//定义默认需要执行的任务
grunt.registerTask(‘default’, [‘uglify’]);//uglify就是grunt任务
};
我们在项目根目录放入一个名为jquery-1.9.1.js的文件，接着在终端输入：

grunt
来执行整个项目文件，grunt则会自动完成任务，这时你就会看到根目录生成了一个被压缩过的query-1.9.1.min.js文件

github地址：https://github.com/gruntjs/grunt

最后

以上就是敏感砖头为你收集整理的grunt的全部内容，希望文章能够帮你解决grunt所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。