视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
使用Grunt.js管理你项目的应用说明_基础知识
2020-11-27 21:09:05 责编:小采
文档


Grunt.js是什么?
Grunt.js是一个Javascript Task Runner(Javascript任务运行器),其基于NodeJS,可用于自动化构建、测试、生成文档的项目管理工具。

Grunt.js并不是仅仅是构建工具,实际上他只是任务运行器,管理每个子任务的自动化运行,我们还能使用他做更多东西。

为什么使用Grunt.js?
简单的说:为了自动化。
对于前端项目,例如:

•为了明确模块分工,我们可能会将Javascript代码拆成很小很小的一个个js文件,但是我们知道,在最终页面上,我们知道过多的js文件会产生过多的Http Request,这不利于页面优化。所以我们可能希望可以合并这些js文件的工具。
•为了用户端请求的文件尽量小,我们希望我们的HTML、Javascript等文件能进行压缩。
•我们可能需要对源代码进行一些单元测试和回归测试。
•我们可能希望有工具能够通过源代码备注自动生成文档,免得手动再写文档。
•……
很明显,这一切都有各种各样的小工具能帮我们做到,但是我们希望最好能输入一个命令,打开一个程序,或者干脆每次修改文件保存后自动进行这一切事情。

以前我们可能使用NodeJS自己写一个build程序,但是现在Grunt.js能够提供我们需要的一切。

安装Grunt.js
Grunt.js 0.4之后,其不再使用全局方式安装整个Grunt.js,而是在全局安装Grunt.js Client,然后在当前项目中安装Grunt,来避免未来不同项目对Grunt不同版本的依赖关系。

如果安装了之前的版本,可以使用npm的命令来删除掉原来的Grunt.js。

npm uninstall -g grunt
然后安装Grunt.js Client:

npm install -g grunt-cli

package.json
package.json是项目的配置文件,有一些项目的依赖信息,以及作者、版本等信息。我们先写一个简单的package.json。
代码如下:
{
"name": "my-project",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.1"
}
}

name属性,表示该项的名字。

version属性,则是该项目的版本号。

devDependencies属性,则包含该项目的依赖,目前我们的依赖只有grunt,以及版本为0.4.1。
在终端大概包含该package.json的目录,输入命令:

npm install
我们会发现,该目录此时多了一个node_modules文件夹,里面有个grunt文件夹,这个就是我们安装在项目的Grunt.js。

用Grunt.js进行压缩js代码
grunt-contrib-uglify是Grunt.js的一个任务模块,其基于著名的js压缩工具uglify,进行js压缩任务。

首先我们在项目依赖加上grunt-contrib-uglify,package.json如下:
代码如下:
{
"name": "my-project",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-uglify": "~0.2.0"
}
}

再使用:

npm install
我们就安装了grunt-contrib-uglify了。

写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']);

};

Gruntfile.js文件用于定义任务,以及任务组的执行顺序等。上面的文件我们定义将src/core.js文件压缩后输出成dst/core.js。则我们输入命令:

grunt
的时候,则会自动完成这个任务。

下载本文
显示全文
专题