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拓展DOM操作 prependChild insertAfert
Nov 17 Javascript
ASP.NET jQuery 实例7 通过jQuery来获取DropDownList的Text/Value属性值
Feb 03 Javascript
javascript仿php的print_r函数输出json数据
Sep 13 Javascript
javascript 操作符(~、&、|、^、)使用案例
Dec 31 Javascript
深入理解JavaScript系列(21):S.O.L.I.D五大原则之接口隔离原则ISP详解
Mar 05 Javascript
javascript实现全角转半角的方法
Jan 23 Javascript
浅谈JavaScript中的分支结构
Jul 01 Javascript
动态JavaScript所造成一些你不知道的危害
Sep 25 Javascript
解决vue2.x中数据渲染以及vuex缓存的问题
Jul 13 Javascript
微信小程序实现文字跑马灯效果
May 26 Javascript
vue插件mescroll.js实现移动端上拉加载和下拉刷新
Mar 07 Javascript
对Layer UI 模块化的用法详解
Sep 26 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 面向对象的一个例子
2011/04/12 PHP
推荐一款MAC OS X 下php集成开发环境mamp
2014/11/08 PHP
PHP批量查询WordPress留言者E-mail地址实现方法
2015/02/15 PHP
CentOS 7.2 下编译安装PHP7.0.10+MySQL5.7.14+Nginx1.10.1的方法详解(mini版本)
2016/09/01 PHP
Yii2实现ActiveForm ajax提交
2017/05/26 PHP
<script defer> defer 是什么意思
2009/05/10 Javascript
JS无法捕获滚动条上的mouse up事件的原因猜想
2012/03/21 Javascript
探索angularjs+requirejs全面实现按需加载的套路
2016/02/26 Javascript
JavaScript中cookie工具函数封装的示例代码
2016/10/11 Javascript
Bootstrap基本样式学习笔记之图片(6)
2016/12/07 Javascript
React创建组件的三种方式及其区别
2017/01/12 Javascript
angular 基于ng-messages的表单验证实例
2017/05/04 Javascript
jQuery实现 RadioButton做必选校验功能
2017/06/15 jQuery
vue中实现滚动加载更多的示例
2017/11/08 Javascript
swiper插件自定义切换箭头按钮
2017/12/28 Javascript
详解ES6通过WeakMap解决内存泄漏问题
2018/03/09 Javascript
react以create-react-app为基础创建项目
2018/03/14 Javascript
vue.js与element-ui实现菜单树形结构的解决方法
2018/04/21 Javascript
使用express获取微信小程序二维码小记
2019/05/21 Javascript
深入解析koa之异步回调处理
2019/06/17 Javascript
Pytorch 之修改Tensor部分值方式
2019/12/27 Python
flask 实现上传图片并缩放作为头像的例子
2020/01/09 Python
python中什么是面向对象
2020/06/11 Python
Django模型验证器介绍与源码分析
2020/09/08 Python
CSS3的column-fill属性对齐列内容高度的用法详解
2016/07/01 HTML / CSS
CSS3 不定高宽垂直水平居中的几种方式
2020/03/26 HTML / CSS
方正Java笔试题
2014/07/03 面试题
电信专业毕业生推荐信
2013/11/18 职场文书
质量负责人任命书
2014/06/06 职场文书
某集团股份有限公司委托书样本
2014/09/24 职场文书
2014年绿化工作总结
2014/12/09 职场文书
校本研修个人总结
2015/02/28 职场文书
芙蓉镇观后感
2015/06/10 职场文书
golang gopm get -g -v 无法获取第三方库的解决方案
2021/05/05 Golang
厉害!这是Redis可视化工具最全的横向评测
2021/07/15 Redis
js前端设计模式优化50%表单校验代码示例
2022/06/21 Javascript