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 相关文章推荐
JCalendar 日历控件 v1.0 beta[兼容IE&Firefox] 有文档和例子
May 30 Javascript
JavaScript 常见对象类创建代码与优缺点分析
Dec 07 Javascript
ExtJS 学习专题(一) 如何应用ExtJS(附实例)
Mar 11 Javascript
AngularJS快速入门
Apr 02 Javascript
jQuery获取某天的农历日期并判断是否除夕或新年的方法
Mar 01 Javascript
JavaScript暂停和继续定时器的实现方法
Jul 18 Javascript
详解JavaScript 中getElementsByName在IE中的注意事项
Feb 21 Javascript
微信扫码支付零云插件版实例详解
Apr 26 Javascript
微信小程序之购物车功能
Sep 23 Javascript
JS通过ajax + 多列布局 + 自动加载实现瀑布流效果
May 30 Javascript
在Vue环境下利用worker运行interval计时器的步骤
Aug 01 Javascript
在vue项目中使用codemirror插件实现代码编辑器功能
Aug 27 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
WordPress中对访客评论功能的一些优化方法
2015/11/24 PHP
修改yii2.0用户登录使用的user表为其它的表实现方法(推荐)
2017/08/01 PHP
Array.prototype.concat不是通用方法反驳[译]
2012/09/20 Javascript
基于pthread_create,readlink,getpid等函数的学习与总结
2013/07/17 Javascript
Sublime Text 3常用插件及安装方法
2015/12/16 Javascript
原生js实现移动端瀑布流式代码示例
2015/12/18 Javascript
jquery实现input框获取焦点的简单实例
2017/01/26 Javascript
详谈jQuery Ajax(load,post,get,ajax)的用法
2017/03/02 Javascript
ES6使用Set数据结构实现数组的交集、并集、差集功能示例
2017/10/31 Javascript
详解Vue路由钩子及应用场景(小结)
2017/11/07 Javascript
9种使用Chrome Firefox 自带调试工具调试javascript技巧
2017/12/22 Javascript
jQuery发请求传输中文参数乱码问题的解决方案
2018/05/22 jQuery
利用vue重构有赞商城的思路以及总结整理
2019/02/21 Javascript
微信小程序 简易计算器实现代码实例
2019/09/02 Javascript
vue+axios实现post文件下载
2019/09/25 Javascript
前端vue-cli项目中使用img图片和background背景图的几种方法
2019/11/13 Javascript
Python比较两个图片相似度的方法
2015/03/13 Python
Python使用scrapy抓取网站sitemap信息的方法
2015/04/08 Python
python UNIX_TIMESTAMP时间处理方法分析
2016/04/18 Python
python 全文检索引擎详解
2017/04/25 Python
使用Python监视指定目录下文件变更的方法
2018/10/15 Python
Django使用Jinja2模板引擎的示例代码
2019/08/09 Python
基于virtualenv创建python虚拟环境过程图解
2020/03/30 Python
django中url映射规则和服务端响应顺序的实现
2020/04/02 Python
python matplotlib模块基本图形绘制方法小结【直线,曲线,直方图,饼图等】
2020/04/26 Python
CSS3 二级导航菜单的制作的示例
2018/04/02 HTML / CSS
美体小铺加拿大官方网站:The Body Shop加拿大
2016/10/30 全球购物
回馈慈善的设计师太阳镜:DIFF eyewear
2019/10/17 全球购物
会计专业导师推荐信
2014/03/08 职场文书
市场营销战略计划书
2014/05/06 职场文书
怎样写离婚协议书
2014/09/10 职场文书
小学教师自我剖析材料
2014/09/29 职场文书
欠条范文
2015/07/03 职场文书
旅游安全责任协议书
2016/03/22 职场文书
python - asyncio异步编程
2021/04/06 Python
Python实现信息轰炸工具(再也不怕说不过别人了)
2021/06/11 Python