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 相关文章推荐
IE与FireFox的兼容性问题分析
Apr 22 Javascript
js中的屏蔽的使用示例
Jul 30 Javascript
点击进行复制的JS代码实例
Aug 23 Javascript
jquery easyui使用心得
Jul 07 Javascript
javascript实现图像循环明暗变化的方法
Feb 25 Javascript
jQuery动态背景图片效果实现方法
Jul 03 Javascript
jQuery实现的超链接提示效果示例【附demo源码下载】
Sep 09 Javascript
jquery实现左右滑动式轮播图
Mar 02 Javascript
JS实现常见的查找、排序、去重算法示例
May 21 Javascript
Vue+Mock.js模拟登录和表格的增删改查功能
Jul 26 Javascript
使用异步controller与jQuery实现卷帘式分页
Jun 18 jQuery
简单聊聊TypeScript只读修饰符
Apr 06 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
基于empty函数的输出详解
2013/06/17 PHP
PHP多线程模拟实现秒杀抢单
2018/02/07 PHP
对laravel的session获取与存取方法详解
2019/10/08 PHP
javascript的对话框详解与参数
2007/03/08 Javascript
简单的无缝滚动程序-仅几行代码
2007/05/08 Javascript
Prototype Object对象 学习
2009/07/12 Javascript
简略的前端架构心得&&基于editor为例子的编码小技巧
2010/11/25 Javascript
jquery配合css简单实现返回顶部效果
2013/09/30 Javascript
js读取并解析JSON类型数据的方法
2015/11/14 Javascript
JavaScript每天必学之基础知识
2016/09/17 Javascript
JS获取年月日时分秒的方法分析
2016/11/28 Javascript
angular实现form验证实例代码
2017/01/17 Javascript
jquery.flot.js简单绘制折线图用法示例
2017/03/13 Javascript
JavaScript实现获取远程的html到当前页面中
2017/03/26 Javascript
javascript 初学教程及五子棋小程序的简单实现
2017/07/04 Javascript
Angular使用操作事件指令ng-click传多个参数示例
2018/03/27 Javascript
Vue 中使用 CSS Modules优雅方法
2018/04/09 Javascript
15个顶级开源JavaScript框架和库
2018/10/10 Javascript
微信小程序云开发之云函数详解
2019/05/16 Javascript
Electron-vue开发的客户端支付收款工具的实现
2019/05/24 Javascript
Postman参数化实现过程及原理解析
2020/08/13 Javascript
详解Python中的条件判断语句
2015/05/14 Python
Python运行报错UnicodeDecodeError的解决方法
2016/06/07 Python
Python一句代码实现找出所有水仙花数的方法
2018/11/13 Python
Pandas之groupby( )用法笔记小结
2019/07/23 Python
python3.7添加dlib模块的方法
2020/07/01 Python
中科前程Java笔试题
2016/11/20 面试题
应届生求职信写作技巧
2013/10/24 职场文书
工商企业管理应届生求职信
2013/11/03 职场文书
外贸业务员求职信范文
2013/12/12 职场文书
后勤部长岗位职责
2013/12/14 职场文书
小学庆六一活动方案
2014/02/28 职场文书
“三支一扶”支教教师思想汇报
2014/09/13 职场文书
2014教师个人自我评价范文
2014/09/13 职场文书
2014年会计主管工作总结
2014/12/20 职场文书
Python的代理类实现,控制访问和修改属性的权限你都了解吗
2022/03/21 Python