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 相关文章推荐
会自动逐行上升的文本框
Jun 30 Javascript
ExtJS PropertyGrid中使用Combobox选择值问题
Jun 13 Javascript
jquery获取对象的方法足以应付常见的各种类型的对象
May 14 Javascript
学习javascript面向对象 理解javascript对象
Jan 04 Javascript
三个js循环的关键字示例(for与while)
Feb 16 Javascript
jquery html动态添加的元素绑定事件详解
May 24 Javascript
js跨域资源共享 基础篇
Jul 02 Javascript
AngularJS 的$timeout服务示例代码
Sep 21 Javascript
vue实现消息的无缝滚动效果的示例代码
Dec 05 Javascript
深入剖析Express cookie-parser中间件实现示例
Feb 01 Javascript
js打开word文档预览操作示例【不是下载】
May 23 Javascript
vue中解决微信html5原生ios虚拟键返回不刷新问题
Oct 20 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 discuz 主题表和回帖表的设计
2009/03/13 PHP
第五章 php数组操作
2011/12/30 PHP
一个严格的PHP Session会话超时时间设置方法
2014/06/10 PHP
PHP使用第三方即时获取物流动态实例详解
2017/04/27 PHP
基于Laravel实现的用户动态模块开发
2017/09/21 PHP
php+redis实现商城秒杀功能
2020/11/19 PHP
JavaScript中的对象的extensible属性介绍
2014/12/30 Javascript
fastclick插件导致日期(input[type="date"])控件无法被触发该如何解决
2015/11/09 Javascript
javascript拖拽应用实例(二)
2016/03/25 Javascript
值得分享的轻量级Bootstrap Table表格插件
2016/05/30 Javascript
12 款 JS 代码测试必备工具(翻译)
2016/12/13 Javascript
Angular.JS通过指令操作DOM的方法
2017/05/10 Javascript
详解Node.js模板引擎Jade入门
2018/01/19 Javascript
Electron中实现大文件上传和断点续传功能
2018/10/28 Javascript
Node.js Stream ondata触发时机与顺序的探索
2019/03/08 Javascript
解决vue的过渡动画无法正常实现问题
2019/10/31 Javascript
JS实现滑动拼图验证功能完整示例
2020/03/29 Javascript
微信小程序实现菜单左右联动
2020/05/19 Javascript
Vite和Vue CLI的优劣
2021/01/30 Vue.js
[09:34]2018DOTA2国际邀请赛寻真——永不放弃的iG
2018/08/14 DOTA
解决使用PyCharm时无法启动控制台的问题
2019/01/19 Python
Python单元测试模块doctest的具体使用
2020/02/10 Python
python小程序之4名牌手洗牌发牌问题解析
2020/05/15 Python
浅谈Python程序的错误:变量未定义
2020/06/02 Python
实例教程 纯CSS3打造非常炫的加载动画效果
2014/11/05 HTML / CSS
详解利用canvas实现环形进度条的方法
2019/06/12 HTML / CSS
使用html5新特性轻松监听任何App自带返回键的示例
2018/03/13 HTML / CSS
用canvas画心电图的示例代码
2018/09/10 HTML / CSS
Luxplus荷兰:以会员价购买美容产品等,独家优惠
2019/08/30 全球购物
简单的JAVA编程面试题
2013/03/19 面试题
物流仓管员工作职责
2014/01/06 职场文书
宠物店的创业计划书范文
2014/01/11 职场文书
弄虚作假心得体会
2014/09/10 职场文书
工地食品安全责任书
2015/05/09 职场文书
创业计划书之游泳馆
2019/09/16 职场文书
德生BCL3000抢先使用感受和评价
2022/04/07 无线电