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获取变量
Aug 24 Javascript
用js实现的模拟jquery的animate自定义动画(2.5K)
Jul 20 Javascript
JS中的this变量的使用介绍
Oct 21 Javascript
js判断字符长度及中英文数字等
Mar 19 Javascript
2种jQuery 实现刮刮卡效果
Feb 01 Javascript
Ajax跨域实现代码(后台jsp)
Jan 21 Javascript
bootstrap table操作技巧分享
Feb 15 Javascript
js+html制作简单日历的方法
Jun 27 Javascript
ReactNative页面跳转Navigator实现的示例代码
Aug 02 Javascript
jQuery动态添加.active 实现导航效果代码思路详解
Aug 29 jQuery
jQuery+ajax实现动态添加表格tr td功能示例
Apr 23 jQuery
js实现电灯开关效果
Jan 19 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
PHP+MySQL5.0中文乱码解决方法
2006/11/20 PHP
php heredoc和phpwind的模板技术使用方法小结
2008/03/28 PHP
php实现MD5加密16位(不要默认的32位)
2013/08/12 PHP
PHP的preg_match匹配字符串长度问题解决方法
2014/05/03 PHP
PHP嵌套输出缓冲代码实例
2015/05/12 PHP
PHP使用PDO操作sqlite数据库应用案例
2019/03/07 PHP
Laravel框架中集成MongoDB和使用详解
2019/10/17 PHP
在JavaScript中遭遇级联表达式陷阱
2007/03/08 Javascript
javascript 有趣而诡异的数组
2009/04/06 Javascript
JavaScript 类似flash效果的立体图片浏览器
2010/02/08 Javascript
从数据结构分析看:用for each...in 比 for...in 要快些
2013/04/17 Javascript
jquery获取元素值的方法(常见的表单元素)
2013/11/15 Javascript
jQuery中:password选择器用法实例
2015/01/03 Javascript
jQuery实现鼠标经过提示信息的地图热点效果
2015/04/26 Javascript
clipboard.js无需Flash无需依赖任何JS库实现文本复制与剪切
2015/10/10 Javascript
Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定示例
2017/01/22 Javascript
Javascript之深入浅出prototype
2017/02/06 Javascript
Webpack实现按需打包Lodash的几种方法详解
2017/05/08 Javascript
微信小程序使用Socket的实例
2017/09/19 Javascript
js 原生判断内容区域是否滚动到底部的实例代码
2017/11/15 Javascript
详解promise.then,process.nextTick, setTimeout 以及 setImmediate的执行顺序
2018/11/21 Javascript
JavaScript eval()函数定义及使用方法详解
2020/07/07 Javascript
[44:15]国士无双DOTA2 6.82版本详解(上)
2014/09/28 DOTA
python获取元素在数组中索引号的方法
2015/07/15 Python
window下eclipse安装python插件教程
2017/04/24 Python
快速了解python leveldb
2018/01/18 Python
python中使用print输出中文的方法
2018/07/16 Python
Django框架视图层URL映射与反向解析实例分析
2019/07/29 Python
Python3.7安装PyQt5 运行配置Pycharm的详细教程
2020/10/15 Python
详解HTML5中的manifest缓存使用
2015/09/09 HTML / CSS
世界上最大的折扣香水店:FragranceNet.com
2016/10/26 全球购物
英国太阳镜品牌:Taylor Morris Eyewear
2018/04/18 全球购物
世界上最大的艺术和工艺用品商店:MisterArt.com
2018/07/13 全球购物
教师年终个人自我评价
2013/10/04 职场文书
党员自我评价范文2015
2015/03/03 职场文书
慈善募捐倡议书
2015/04/27 职场文书