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 相关文章推荐
jQuery函数的等价原生函数代码示例
May 27 Javascript
js图片滚动效果时间可随意设定当鼠标移上去时停止
Jun 26 Javascript
jQuery过滤HTML标签并高亮显示关键字的方法
Aug 07 Javascript
BootStrap按钮标签及基本样式
Nov 23 Javascript
基于JavaScript实现微信抢红包功能
Jul 20 Javascript
微信小程序movable view移动图片和双指缩放实例代码
Aug 08 Javascript
vue绑定设置属性的多种方式(5)
Aug 16 Javascript
微信小程序自定义模态对话框实例详解
Aug 16 Javascript
vee-validate vue 2.0自定义表单验证的实例
Aug 28 Javascript
node(koa2) web应用模块介绍详解
Mar 29 Javascript
解决vue-cli 打包后自定义动画未执行的问题
Nov 12 Javascript
小程序富文本提取图片可放大缩小
May 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
实用函数9
2007/11/08 PHP
PHP中的string类型使用说明
2010/07/27 PHP
php unset全局变量运用问题的深入解析
2013/06/17 PHP
php 发送带附件邮件示例
2014/01/23 PHP
mac下多个php版本快速切换的方法
2016/10/09 PHP
Thinkphp 框架基础之源码获取、环境要求与目录结构分析
2020/04/27 PHP
地震发生中逃生十大法则
2008/05/12 Javascript
JavaScript 直接操作本地文件的实现代码
2009/12/01 Javascript
js自执行函数的几种不同写法的比较
2012/08/16 Javascript
Three.js源码阅读笔记(光照部分)
2012/12/27 Javascript
javascript拖拽效果延伸学习
2016/04/04 Javascript
浅谈js键盘事件全面控制
2016/12/01 Javascript
javaScript实现滚动条事件详解
2020/03/24 Javascript
jQuery实现列表的增加和删除功能
2018/06/14 jQuery
Nuxt.js实现校验访问浏览器类型的中间件
2018/08/24 Javascript
脚手架vue-cli工程webpack的基本用法详解
2018/09/29 Javascript
ES2020 新特性(种草)
2020/01/12 Javascript
Vue单页面应用中实现Markdown渲染
2021/02/14 Vue.js
python编写暴力破解FTP密码小工具
2014/11/19 Python
Python中使用SAX解析xml实例
2014/11/21 Python
关于你不想知道的所有Python3 unicode特性
2014/11/28 Python
分析Python编程时利用wxPython来支持多线程的方法
2015/04/07 Python
Python数据结构与算法之使用队列解决小猫钓鱼问题
2017/12/14 Python
python 解决tqdm模块不能单行显示的问题
2020/02/19 Python
20行Python代码实现一款永久免费PDF编辑工具的实现
2020/08/27 Python
css图标制作教程制作云图标
2014/01/19 HTML / CSS
Canvas在超级玛丽游戏中的应用详解
2021/02/06 HTML / CSS
StudentUniverse英国:学生航班、酒店和旅游
2019/08/25 全球购物
百度JavaScript笔试题
2015/01/15 面试题
2015年学生会部门工作总结
2015/04/21 职场文书
2015年社区宣传工作总结
2015/05/20 职场文书
博士论文答辩开场白
2015/06/01 职场文书
高中数学课堂教学反思
2016/02/18 职场文书
关于战胜挫折的名言警句大全!
2019/07/05 职场文书
推荐六本经典文学奖书籍:此生必读
2019/08/22 职场文书
go语言中fallthrough的用法说明
2021/05/06 Golang