Node.js的项目构建工具Grunt的安装与配置教程
来源: 阅读:1607 次 日期:2016-07-01 11:32:53
温馨提示: 小编为您整理了“Node.js的项目构建工具Grunt的安装与配置教程”,方便广大网友查阅!

Grunt是为Node打造的项目构建工具,相当于C/C++世界中的makefile,可以执行像压缩、编译、单元测试、代码检查以及打包发布的任务,下面我们就来一起看一下Node.js的项目构建工具Grunt的安装与配置教程:

Grunt 基于 Node.js ,用 JS 开发,这样就可以借助 Node.js 实现跨系统跨平台的桌面端的操作,例如文件操作等等。此外,Grunt 以及它的插件们,都作为一个 包 ,可以用 NPM 安装进行管理。

所以 NPM 生成的 package.json 项目文件,里面可以记录当前项目中用到的 Grunt 插件,而 Grunt 会调用 Gruntfile.js 这个文件,解析里面的任务(task)并执行相应操作。

安装 Grunt-cli

其实是安装 Grunt-cli ,这里安装Grunt的命令行支持(command line interface,简称CLI),在这之后,命令提示符中将会识别grunt命令。安装grunt-cli 并不能称为安装Grunt完毕。这是因为,Grunt本身不是全局使用的,任何具体的工作目录,如果要使用Grunt,都需要安装一次Grunt。这样做也是因为不同的工作目录,需要通过Grunt做的自动化工作也不同,因此需要独立配置。

npm install -g grunt-cli

—save-dev 参数,表示会把刚安装的东西添加到 package.json 文件中。

生成 package.json 文件

npm对工作目录有一个要求。这个要求是:根目录位置处有一个package.json

文件。这个文件定义了工作目录对应的一些项目信息(名字,描述),以及包(就是npm模块)依赖关系。

执行下面命令便可以初始化

npm init

为当前工作目录安装Grunt和需要的插件

方法1

之前我们把Grunt安装到了全局目录下,现在需要引入到当前项目路径,与此同时,所需要的插件可能有这些:

合并文件:grunt-contrib-concat

语法检查:grunt-contrib-jshint

Scss 编译:grunt-contrib-sass

压缩文件:grunt-contrib-uglify

监听文件变动:grunt-contrib-watch

建立本地服务器:grunt-contrib-connect

安装它们的方式可以是:

npm install --save-dev grunt

npm install --save-dev 插件1 插件2 插件3

这个时候package.json文件夹里多出了一些代码。

"devDependencies": {

 "grunt": "0.4.1"

},

方法2-手动更改package.json

"devDependencies": {

  "grunt": "~0.4.1",

  "grunt-contrib-cssmin": "~0.7.0"

 }

手动在package.json文件里面添加这个字段,将需要依赖的包添加进去,如果只需安装最新版本,可以改成 * ,然后执行npm install,会发现文件夹里多了node_modules文件夹,里面存放的就是我们需要的插件。

配置

一般来说,直接使用模板作为配置文件。

module.exports = function(grunt) {

 "use strict";

 grunt.initConfig({

 //插件配置区域

 });

 //加载插件任务,要使用谁就添加谁

 grunt.loadNpmTasks('grunt-contrib-uglify');

 grunt.loadNpmTasks('grunt-contrib-cssmin');

 grunt.loadNpmTasks('grunt-contrib-imagemin');

 // 注册任务

 grunt.registerTask('default', ['cssmin', 'imagemin', 'uglify']);

};

grunt.loadNpmTasks()是加载插件任务。其实就是说,你如果要使用哪个插件的功能,请在这部分用这句代码把插件任务添加进去。

grunt.registerTask()是注册任务,默认有一个default。默认的意思就是说,你最后使用的时候,在目录的命令提示符里直接输入grunt便可以执行注册的任务,相当于执行了default这个任务。

使用自定义任务

可以注册更多的任务命令,使用其他的命名。比如

grunt.registerTask('custom', ['cssmin', 'imagemin']);

对应使用的时候,输入:

grunt custom

更多信息请查看网络编程
由于各方面情况的不断调整与变化, 提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!
关于我们 | 联系我们 | 人才招聘 | 网站声明 | 网站帮助 | 非正式的简要咨询 | 简要咨询须知 | 加入群交流 | 手机站点 | 投诉建议
工业和信息化部备案号:滇ICP备2023014141号-1 云南省教育厅备案号:云教ICP备0901021 滇公网安备53010202001879号 人力资源服务许可证:(云)人服证字(2023)第0102001523号
云南网警备案专用图标
联系电话:0871-65317125(9:00—18:00) 获取招聘考试信息及咨询关注公众号:hfpxwx
咨询QQ:526150442(9:00—18:00)版权所有:
云南网警报警专用图标
Baidu
map