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 相关文章推荐
音乐播放用的的几个函数
Sep 07 Javascript
jQuery使用手册之一
Mar 24 Javascript
js wmp操作代码小结(音乐连播功能)
Nov 08 Javascript
javascript web对话框与弹出窗口
Feb 22 Javascript
js模仿jquery的写法示例代码
Jun 16 Javascript
JavaScript调用ajax获取文本文件内容实现代码
Mar 28 Javascript
详解JS面向对象编程
Jan 24 Javascript
深入了解JavaScript的逻辑运算符(与、或)
Dec 20 Javascript
浅谈JS中的常用选择器及属性、方法的调用
Jul 28 Javascript
简单的网页广告特效实例
Aug 19 Javascript
React 项目迁移 Webpack Babel7的实现
Sep 12 Javascript
javascript实现打砖块小游戏(附完整源码)
Sep 18 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
phpmyadmin操作流程
2006/10/09 PHP
Ext.data.PagingMemoryProxy分页一次性读取数据的实现代码
2010/04/07 PHP
新页面打开实际尺寸的图片
2006/08/25 Javascript
js arguments.callee的应用代码
2009/05/07 Javascript
jQuery AJAX回调函数this指向问题
2010/02/08 Javascript
dwz 如何去掉ajaxloading具体代码
2013/05/22 Javascript
js从Cookies里面取值的简单实现
2014/06/30 Javascript
纯javascript实现四方向文本无缝滚动效果
2015/06/16 Javascript
jQuery EasyUI 右键菜单--关闭标签/选项卡的简单实例
2016/10/10 Javascript
Bootstrap 实现查询的完美方法
2016/10/26 Javascript
JS处理一些简单计算题
2018/02/24 Javascript
Vue自定义弹窗指令的实现代码
2018/08/13 Javascript
js实现页面多个日期时间倒计时效果
2019/06/20 Javascript
vue中改变滚动条样式的方法
2020/03/03 Javascript
python字符串替换的2种方法
2014/11/30 Python
在Python的Bottle框架中使用微信API的示例
2015/04/23 Python
Python实现小数转化为百分数的格式化输出方法示例
2017/09/20 Python
python使用itchat库实现微信机器人(好友聊天、群聊天)
2018/01/04 Python
Python docx库用法示例分析
2019/02/16 Python
Python列表切片操作实例总结
2019/02/19 Python
Flask框架学习笔记之路由和反向路由详解【图文与实例】
2019/08/12 Python
解决python ThreadPoolExecutor 线程池中的异常捕获问题
2020/04/08 Python
五分钟带你搞懂python 迭代器与生成器
2020/08/30 Python
python 使用三引号时容易犯的小错误
2020/10/21 Python
学前班教师的自我鉴定
2013/12/05 职场文书
数控专业大学毕业生职业规划范文
2014/02/06 职场文书
社区义诊活动总结
2014/04/30 职场文书
体育比赛口号
2014/06/09 职场文书
教师工作能力自我评价
2015/03/04 职场文书
2015年度物流工作总结
2015/04/30 职场文书
2015小学师德工作总结
2015/07/21 职场文书
团队拓展训练心得体会
2016/01/12 职场文书
CocosCreator如何实现划过的位置显示纹理
2021/04/14 Javascript
一篇文章搞懂python混乱的切换操作与优雅的推导式
2021/08/23 Python
使用logback实现按自己的需求打印日志到自定义的文件里
2021/08/30 Java/Android
MySQL基于索引的压力测试的实现
2021/11/07 MySQL