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 相关文章推荐
Javascript Throttle & Debounce应用介绍
Mar 19 Javascript
js切换光标示例代码
Oct 10 Javascript
两个select多选模式的选项相互移动(示例代码)
Jan 11 Javascript
JavaScript异步编程Promise模式的6个特性
Apr 03 Javascript
js常用数组操作方法简明总结
Jun 20 Javascript
JavaScript中的6种运算符总结
Oct 16 Javascript
浅析Node.js的Stream模块中的Readable对象
Jul 29 Javascript
使用JavaScript获取Request中参数的值方法
Sep 27 Javascript
Javascript数组循环遍历之forEach详解
Nov 07 Javascript
使用bootstraptable插件实现表格记录的查询、分页、排序操作
Aug 06 Javascript
js中Array对象的常用遍历方法详解
Jan 17 Javascript
HTML+JS实现在线朗读器
Feb 15 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
header()函数使用说明
2006/11/23 PHP
mysql 字段类型说明
2007/04/27 PHP
Wordpress php 分页代码
2009/10/21 PHP
php join函数应用
2011/05/04 PHP
深入php 正则表达式的学习探讨
2013/06/06 PHP
php实现memcache缓存示例讲解
2013/12/04 PHP
浅析Yii2 GridView实现下拉搜索教程
2016/04/22 PHP
javascript 出生日期和身份证判断大全
2008/11/13 Javascript
JS 分号引起的一段调试问题
2009/06/18 Javascript
js setattribute批量设置css样式
2009/11/26 Javascript
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
2011/12/31 Javascript
js判断横竖屏及禁止浏览器滑动条示例
2014/04/29 Javascript
JavaScript实现多个重叠层点击切换效果的方法
2015/04/24 Javascript
Webpack 服务器端代码打包的示例代码
2017/09/19 Javascript
javaScript canvas实现(画笔大小 颜色 橡皮的实例)
2017/11/28 Javascript
jQuery zTree插件使用简单教程
2019/08/16 jQuery
js全屏事件fullscreenchange 实现全屏、退出全屏操作
2019/09/17 Javascript
Vue使用轮询定时发送请求代码
2020/08/10 Javascript
js制作提示框插件
2020/12/24 Javascript
django自定义Field实现一个字段存储以逗号分隔的字符串
2014/04/27 Python
Python应用03 使用PyQT制作视频播放器实例
2016/12/07 Python
tensorflow TFRecords文件的生成和读取的方法
2018/02/06 Python
python opencv 图像尺寸变换方法
2018/04/02 Python
python实现flappy bird小游戏
2018/12/24 Python
pip安装python库的方法总结
2019/08/02 Python
Python pandas自定义函数的使用方法示例
2019/11/20 Python
Django form表单与请求的生命周期步骤详解
2020/06/07 Python
python爬取抖音视频的实例分析
2021/01/19 Python
宝拉珍选官方旗舰店:2%水杨酸精华液,收缩毛孔粗大和祛痘
2018/07/01 全球购物
业务经理岗位职责
2013/11/11 职场文书
大学生作弊检讨书
2014/02/19 职场文书
2014年仓库工作总结
2014/11/20 职场文书
老员工辞职信范文
2015/05/12 职场文书
奇妙的 CSS shapes(CSS图形)
2021/04/05 HTML / CSS
一次Mysql update sql不当引起的生产故障记录
2022/04/01 MySQL
Nginx隐藏式跳转(浏览器URL跳转后保持不变)
2022/04/07 Servers