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 相关文章推荐
appendChild() 或 insertBefore()使用与区别介绍
Oct 11 Javascript
jQuery+ajax中getJSON() 用法实例
Dec 22 Javascript
js控制页面的全屏展示和退出全屏显示的方法
Mar 10 Javascript
jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
Aug 26 Javascript
Bootstrap每天必学之按钮(一)
Nov 24 Javascript
node.js实现爬虫教程
Aug 25 Javascript
Vue.js每天必学之构造器与生命周期
Sep 05 Javascript
详解weex默认webpack.config.js改造
Jan 08 Javascript
vue项目中引入vue-datepicker插件的详解
May 14 Javascript
关于layui的下拉搜索框异步加载数据的解决方法
Sep 28 Javascript
Echarts实现单条折线可拖拽效果
Dec 19 Javascript
vue3.0生命周期的示例代码
Sep 24 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.ini实现Mysql导入数据库文件最大限制的修改方法
2007/12/11 PHP
关于PHP堆栈与列队的学习
2013/06/21 PHP
php正则匹配html中带class的div并选取其中内容的方法
2015/01/13 PHP
使用URL传输SESSION信息
2015/07/14 PHP
图文详解phpstorm配置Xdebug进行调试PHP教程
2016/06/13 PHP
获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft (For:IE5+ FF1 )[
2006/12/22 Javascript
javascript Select标记中options操作方法集合
2008/10/22 Javascript
jQuery 点击图片跳转上一张或下一张功能的实现代码
2010/03/12 Javascript
js 窗口抖动示例
2013/09/04 Javascript
javascript验证上传文件的类型限制必须为某些格式
2013/11/14 Javascript
可恶的ie8提示缺少id未定义
2014/03/20 Javascript
JS对象与json字符串格式转换实例
2014/10/28 Javascript
js html css实现复选框全选与反选
2016/10/09 Javascript
微信小程序 设置启动页面的两种方法
2017/03/09 Javascript
JS实现的集合去重,交集,并集,差集功能示例
2018/03/13 Javascript
对vue生命周期的深入理解
2020/12/03 Vue.js
[01:46]新英雄登场
2019/09/10 DOTA
详解常用查找数据结构及算法(Python实现)
2016/12/09 Python
python sklearn库实现简单逻辑回归的实例代码
2019/07/01 Python
完美解决python3.7 pip升级 拒绝访问问题
2019/07/12 Python
python 普通克里金(Kriging)法的实现
2019/12/19 Python
记一次pyinstaller打包pygame项目为exe的过程(带图片)
2020/03/02 Python
CSS3教程(6):创建网站多列
2009/04/02 HTML / CSS
CSS3的Flexbox布局的简明入门指南
2016/04/08 HTML / CSS
在线购买世界上最好的酒:BoozeBud
2018/06/07 全球购物
Sunglass Hut巴西网上商店:男女太阳镜
2020/10/04 全球购物
什么是符号链接,什么是硬链接?符号链接与硬链接的区别是什么?
2013/05/03 面试题
省优秀教师事迹材料
2014/01/30 职场文书
教学改革实施方案
2014/03/31 职场文书
乡镇领导班子批评与自我批评材料
2014/09/23 职场文书
2014年精神文明建设工作总结
2014/11/19 职场文书
2014年扫黄打非工作总结
2014/12/03 职场文书
2014年工作总结及2015工作计划
2014/12/12 职场文书
消夏晚会主持词
2015/06/30 职场文书
2019年图书室自查报告范本
2019/10/12 职场文书
宫崎骏十大动画电影,宫崎骏好看的动画电影排名
2022/03/22 日漫