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 写的简单进度条控件
Jan 22 Javascript
让任务管理器中的CPU跳舞的js代码
Nov 01 Javascript
js函数获取html中className所在的内容并去除标签
Sep 08 Javascript
jqeury-easyui-layout问题解决方法
Mar 24 Javascript
详谈javascript异步编程
Feb 21 Javascript
Bootstrap Tooltip显示换行和左对齐的解决方案
Oct 11 Javascript
用Webpack构建Vue项目的实践
Nov 07 Javascript
JS字符串去除连续或全部重复字符的实例
Mar 08 Javascript
vue 解决computed修改data数据的问题
Nov 06 Javascript
js 数组当前行添加数据方法详解
Jul 28 Javascript
在vscode 中设置 vue模板内容的方法
Sep 02 Javascript
vue表单验证之禁止input输入框输入空格
Dec 03 Vue.js
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扩展CURL的用法详解
2014/06/20 PHP
Laravel 4 初级教程之视图、命名空间、路由
2014/10/30 PHP
thinkphp5.1 文件引入路径问题及注意事项
2018/06/13 PHP
动态调用css文件——jquery的应用
2007/02/20 Javascript
javascript parseInt 大改造
2009/09/27 Javascript
js 模拟实现类似c#下的hashtable的简单功能代码
2010/01/24 Javascript
异步动态加载JS并运行(示例代码)
2013/12/13 Javascript
js 与 php 通过json数据进行通讯示例
2014/03/26 Javascript
Underscore.js 1.3.3 中文注释翻译说明
2015/06/25 Javascript
JavaScript设置、获取、清除单值和多值cookie的方法
2015/11/17 Javascript
JavaScript实现简单的tab选项卡切换
2016/01/05 Javascript
AngularJS单选框及多选框实现双向动态绑定
2016/01/13 Javascript
jquery 多个radio的click事件实例
2016/12/03 Javascript
JS实现的简单图片切换功能示例【测试可用】
2017/02/14 Javascript
Express下采用bcryptjs进行密码加密的方法
2018/02/07 Javascript
vue嵌套路由与404重定向实现方法分析
2018/05/04 Javascript
vue-router+nginx 非根路径配置方法
2018/06/30 Javascript
移动端滑动切换组件封装 vue-swiper-router实例详解
2018/11/25 Javascript
详解基于electron制作一个node压缩图片的桌面应用
2019/01/29 Javascript
js实现适配移动端的拖动效果
2020/01/13 Javascript
JS获取表格视图所选行号的ids过程解析
2020/02/21 Javascript
javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法
2020/05/14 Javascript
Python的Tornado框架实现图片上传及图片大小修改功能
2016/06/30 Python
Python 变量类型详解
2018/10/10 Python
带你认识Django
2019/01/15 Python
简单介绍python封装的基本知识
2019/08/10 Python
使用Python实现将多表分批次从数据库导出到Excel
2020/05/15 Python
使用 css3 实现圆形进度条的示例
2017/07/05 HTML / CSS
英国DIY汽车维修配件网站:DIY Car Service Parts
2019/08/30 全球购物
525心理活动总结
2014/07/04 职场文书
2014年有孩子的离婚协议书范本
2014/10/08 职场文书
2016年猴年新春致辞
2015/08/01 职场文书
某学校的2019年度工作报告范本
2019/10/11 职场文书
80行代码写一个Webpack插件并发布到npm
2021/05/24 Javascript
mysql获取指定时间段中所有日期或月份的语句(不设存储过程,不加表)
2021/06/18 MySQL
Apache Kafka 分区重分配的实现原理解析
2022/07/15 Servers