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 相关文章推荐
js word表格动态添加代码
Jun 07 Javascript
单击按钮显示隐藏子菜单经典案例
Jan 04 Javascript
jQuery实现表头固定效果的实例代码
May 24 Javascript
JS实现自动定时切换的简洁网页选项卡效果
Oct 13 Javascript
jquery.flot.js简单绘制折线图用法示例
Mar 13 Javascript
通过一个简单的例子学会vuex与模块化
Nov 22 Javascript
vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法
Nov 27 Javascript
vue编译打包本地查看index文件的方法
Feb 23 Javascript
通过封装scroll.js 获取滚动条的值
Jul 13 Javascript
Vue Autocomplete 自动完成功能简单示例
May 25 Javascript
关于在LayUI中使用AJAX提交巨坑记录
Oct 25 Javascript
Vue项目前后端联调(使用proxyTable实现跨域方式)
Jul 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
Windows下的PHP5.0安装配制详解
2006/09/05 PHP
用PHP连接Oracle数据库
2006/10/09 PHP
PHP curl 抓取AJAX异步内容示例
2014/09/09 PHP
使用Thinkphp框架开发移动端接口
2015/08/05 PHP
php正则匹配文章中的远程图片地址并下载图片至本地
2015/09/29 PHP
Zend Framework入门教程之Zend_Session会话操作详解
2016/12/08 PHP
PHP中创建和编辑Excel表格的方法
2018/09/13 PHP
flash javascript之间的通讯方法小结
2008/12/20 Javascript
js+JQuery返回顶部功能如何实现
2012/12/03 Javascript
javascript的原生方法获取数组中的最大(最小)值
2012/12/19 Javascript
javascript实现复选框超过限制即弹出警告框的方法
2015/02/25 Javascript
分享使用AngularJS创建应用的5个框架
2015/12/05 Javascript
JavaScript实现仿淘宝商品购买数量的增减效果
2016/01/22 Javascript
JavaScript关于提高网站性能的几点建议(一)
2016/07/24 Javascript
BootStrap 实现各种样式的进度条效果
2016/12/07 Javascript
JavaScript对象引用与赋值实例详解
2017/03/15 Javascript
JS条形码(一维码)插件JsBarcode用法详解【编码类型、参数、属性】
2017/04/19 Javascript
Python简单的制作图片验证码实例
2017/05/31 Python
Python3 处理JSON的实例详解
2017/10/29 Python
Python定义二叉树及4种遍历方法实例详解
2018/07/05 Python
python 顺时针打印矩阵的超简洁代码
2018/11/14 Python
python3实现字符串操作的实例代码
2019/04/16 Python
对Django中的权限和分组管理实例讲解
2019/08/16 Python
python requests.get带header
2020/05/05 Python
python实现录音功能(可随时停止录音)
2020/10/26 Python
HTML5 canvas基本绘图之绘制五角星
2016/06/27 HTML / CSS
美国领先的汽车轮胎和轮毂供应商:TireBuyer
2016/07/21 全球购物
世界上最大的巴士旅游观光公司:Big Bus Tours
2016/10/20 全球购物
Pandora西班牙官方商店:PandoraShop.es
2020/10/05 全球购物
中间件分为哪几类
2012/03/14 面试题
员工评语大全
2014/01/19 职场文书
《影子》教学反思
2014/02/21 职场文书
大三学生做职业规划:给未来找个方向
2014/02/24 职场文书
财务管理专业求职信
2014/06/11 职场文书
gateway网关接口请求的校验方式
2021/07/15 Java/Android
Linux在两个服务器直接传文件的操作方法
2022/08/05 Servers