Node.js的项目构建工具Grunt的安装与配置教程


Posted in Javascript onMay 12, 2016

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
Javascript 相关文章推荐
input+select(multiple) 实现下拉框输入值
May 21 Javascript
document.getElementById为空或不是对象的解决方法
Jan 24 Javascript
jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项
Apr 04 Javascript
js选取多个或单个元素的实现代码(用class)
Aug 22 Javascript
GridView中获取被点击行中的DropDownList和TextBox中的值
Jul 18 Javascript
基于jquery扩展漂亮的下拉框可以二次修改
Nov 19 Javascript
javascript和jquery修改a标签的href属性
Dec 16 Javascript
Bootstrap table两种分页示例
Dec 23 Javascript
微信小程序 简单教程实例详解
Jan 13 Javascript
js实现购物车功能
Jun 12 Javascript
JavaScript实现动态添加、移除元素或属性的方法分析
Jan 03 Javascript
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
Sep 02 Javascript
js自定义select下拉框美化特效
May 12 #Javascript
使用jQuery制作遮罩层弹出效果的极简实例分享
May 12 #Javascript
JS函数的定义与调用方法推荐
May 12 #Javascript
使用jQuery实现Web页面换肤功能的要点解析
May 12 #Javascript
JS定义类的六种方式详解
May 12 #Javascript
值得分享和收藏的Bootstrap学习教程
May 12 #Javascript
jQuery中$.each()函数的用法引申实例
May 12 #Javascript
You might like
php5.2.0内存管理改进
2007/01/22 PHP
php正则过滤html标签、空格、换行符的代码(附说明)
2010/10/25 PHP
Linux下CoreSeek及PHP扩展模块的安装
2012/09/23 PHP
深入理解curl类,可用于模拟get,post和curl下载
2013/06/08 PHP
浅析Yii中使用RBAC的完全指南(用户角色权限控制)
2013/06/20 PHP
php实现搜索类封装示例
2016/03/31 PHP
PHP读取mssql json数据中文乱码的解决办法
2016/04/11 PHP
php微信支付接口开发程序
2016/08/02 PHP
thinkphp5框架实现的自定义扩展类操作示例
2019/05/16 PHP
JavaScript 注册事件代码
2011/01/27 Javascript
优化innerHTML操作(提高代码执行效率)
2011/08/20 Javascript
Javascript 判断是否存在函数的方法
2013/01/03 Javascript
js前台分页显示后端JAVA数据响应
2013/03/18 Javascript
JS+CSS实现TreeMenu二级树形菜单完整实例
2015/09/18 Javascript
关于网页中的无缝滚动的js代码
2016/06/09 Javascript
JavaScript中数组slice和splice的对比小结
2016/09/22 Javascript
用nodejs搭建websocket服务器
2017/01/23 NodeJs
javascript实现滑动解锁功能
2017/03/22 Javascript
vue-router单页面路由
2017/06/17 Javascript
解决angularjs service中依赖注入$scope报错的问题
2018/10/02 Javascript
详解在HTTPS 项目中使用百度地图 API
2019/04/26 Javascript
pyhton列表转换为数组的实例
2018/04/04 Python
详解python分布式进程
2018/10/08 Python
pyinstaller打包找不到文件的问题解决
2020/04/15 Python
Python Merge函数原理及用法解析
2020/09/16 Python
基于python模拟TCP3次握手连接及发送数据
2020/11/06 Python
细说CSS3中的选择符
2008/10/17 HTML / CSS
英国旅游额外服务市场领导者:Holiday Extras(机场停车场、酒店、接送等)
2017/10/07 全球购物
美国专业汽车音响和移动电子产品零售商:Car Toys
2019/05/13 全球购物
4s店销售经理岗位职责
2014/07/19 职场文书
中国文明网向国旗敬礼寄语大全
2014/09/27 职场文书
2014年企业工会工作总结
2014/11/12 职场文书
孕妇离婚协议书范本
2014/11/20 职场文书
教师年度个人总结
2015/02/11 职场文书
SpringBoot SpringEL表达式的使用
2021/07/25 Java/Android
MySQL中JOIN连接的基本用法实例
2022/06/05 MySQL