前端开发神器:grunt快速入门
2019独角兽企业重金招聘Python工程师标准>>>
grunt是什么?
grunt是一个基于nodejs的task runner,简单来说,就是类似于.net平台的msbuild以及java平台的maven。
grunt能做什么?
grunt可以使你的项目中重复的任务,比如压缩,语法检查,编译(比如LESS预处理,coffeescript编译),单元测试等变得更加简单。
安装
因为grunt是基于node.js的,所以我们首先要安装node.js以及node.js的包管理工具npm。
windows 平台下只要在NODE.JS官方下载MSI安装包,直接安装,node.js以及npm就能直接装好。
Linux平台下,因为一些发行版软件源的node.js版本想对比较低,grunt 0.4又要求node.js的版本要>=0.8.0,因此我推荐编译安装。
安装完成node.js以后,就可以开始安装npm,grunt以及grunt-cli了。
sudo apt-get -y install npm
sudo npm install -g grunt
sudo npm install -g grunt-cli
Getting started
配置文件
grunt需要两个配置文件:Gruntfile.js以及package.json。
Gruntfile.js
Gruntfile.js要放在项目的根文件夹下,用于配置grunt要运行的任务:
module.exports = function( grunt ) {grunt.initConfig({pkg: grunt.file.readJSON('package.json'),uglify: {options: {banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'},build: {src: 'src/<%= pkg.name %>.js',dest: 'build/<%= pkg.name %>.min.js'}}});grunt.loadNpmTasks('grunt-jsdoc');
}
NOTE:
通过<%%>模板字符串可以引用任何的配置属性,比如<%=pkg.name%>
通过grunt提供的API方法loadNpmTasks,我们可以加载grunt的插件
grunt.loadNpmTasks('grunt-jsdoc');
package.json
package.json用来存放项目的元数据,比如项目的版本,项目许可证书——比如MIT,GPL啥的,作者,项目依赖的库等:
{"name": "ui","version": "1.0.0","description": "","main": "ui.min.js","directories": {"doc": "doc"},"scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"repository": "","keywords": ["javascript","ui",""],"author": "","license": "BSD","devDependencies": {"grunt": "~0.4.1","grunt-jsdoc": "~0.4.0","grunt-contrib-copy": "~0.4.1"}
}
当你准备开始使用grunt去做一个新项目的时候,你可以使用npm init来创建一个基本的package.json文件。
grunt的任务
Grunt就只支持两种任务,分别是基本的Task以及MultiTasks。这两者的区别是:Basic Task的任务配置只有一个,而MultiTasks的任务配置则有多个。
默认情况下,如果没有指定MultiTasks要使用的目标配置,那么实际执行任务的时候,grunt会加载并且执行所有的任务配置。大多数的grunt插件任务都是MultiTasks。
我们以grunt-jsdoc插件作为例子,实际观察一下MultiTasks的运行:
// grunt-jsdoc插件的任务配置
jsdoc: {dev : {src: jsdoc_src, options: {template : 'templates/ebaui',private : false,destination: 'build/doc/',tutorials : 'build/demo/'}},release : {src: jsdoc_src, options: {template : '',private : false, destination: '../release/<%=pkg.version%>/doc/',tutorials : 'build/demo/'}}
}
没有指定任务的目标配置
运行任务:
grunt jsdoc
在console里会输出如下结果:
Running "jsdoc:dev" (jsdoc) task
Documentation generated to E:\mygit\eba.ui\trunk\build\doc
Running "jsdoc:release" (jsdoc) task
Documentation generated to E:\mygit\eba.ui\release\1.0.0\doc
Done, without errors.
指定任务的目标配置
运行任务:
grunt jsdoc:dev
在console里会输出如下结果:
Running "jsdoc:dev" (jsdoc) task
Documentation generated to E:\mygit\eba.ui\trunk\build\doc
Done, without errors.
编写grunt任务
grunt全局命名空间下,提供了以下两个和定义任务有关的API:
// Alias task
grunt.registerTask(taskName, taskList)
// Function task
grunt.registerTask(taskName, description, taskFunction)
// multi task
grunt.registerMultiTask(taskName, description, taskFunction)
registerTask
// Default task(s).
var defaultTasks = ['build_js:dev','build_themes:dev','copy:dev','build_template:dev'
];
grunt.registerTask('default', defaultTasks);
registerMultiTask
grunt.registerMultiTask('cp_phpdemo','',function(){log( ' task ' + this.target + ' start......' );var config = this.data;var source = grunt.file.expand( this.data.src );var dest = this.data.dest;if( source && source.length > 0 ){source.forEach( function( item ) {var filename = path.basename( item );copyfile( item, dest+filename );} );}log( ' task ' + this.target + ' end......' );
});
运行grunt任务
// 默认执行default任务
grunt
// 加载jsdoc所有任务配置,并且以每个配置去执行jsdoc任务
grunt jsdoc
// 指定使用dev的任务配置,并且以这个配置去执行jsdoc任务
grunt jsdoc:dev
转载于:https://my.oschina.net/knightuniverse/blog/169189
前端开发神器:grunt快速入门相关推荐
- vscode用鼠标滚轮_前端开发神器 VSCode 使用总结
前端开发神器 VSCode 使用总结 VSCode 是微软出品的,基于 Electron 和 TypeScript 的,集成了 git 版本管理和命令行终端,而且开源稳定,插件丰富,再搭配一款 Chr ...
- HTML5+app开发学习之快速入门篇
HTML5+app开发学习之快速入门篇 5+app开发概念理解相关 开发环境与支持 快速入门实战 5+app开发概念理解相关 见博文:学习跨平台移动应用开发必须理解的一些概念 开发环境与支持 开发环境 ...
- webstorm+nodejs+JetBrains IDE Support+chrome打造前端开发神器
#webstorm+nodejs+JetBrains IDE Support+chrome打造前端开发神器 -- 工欲善其事 必先利其器##各工具介绍 `webstorm`是**JetBrains** ...
- 零基础不建议学前端_web前端开发零基础怎样入门-哈尔滨前端学习
web前端开发零基础怎样入门-哈尔滨前端学习,俗话说,知己知彼,百战百胜.要想学好web前端,首先要了解什么是web前端,下面由小编来给大家介绍一下: 1什么是web? Web就是在Http协议基础之 ...
- 【前端实例代码】霓虹灯按钮动画效果悬停2| html CSS特效 惊艳| 前端开发 网页制作 基础入门教程
b站视频演示效果: [web前端特效源码]霓虹灯按钮动画效果悬停2| html CSS特效 惊艳| 前端开发 网页制作 基础入门教程 效果图: 完整代码: <!DOCTYPE html> ...
- 【前端实例代码】霓虹灯按钮动画效果悬停| html CSS特效 惊艳| 前端开发 网页制作 基础入门教程
b站视频演示效果: [web前端特效源码]霓虹灯按钮动画效果悬停| html CSS特效 惊艳| 前端开发 网页制作 基础入门教程 效果图: 完整代码: <!DOCTYPE html> & ...
- 游戏开发的HelloWorld,快速入门,新手上路,使用CocosCreator+JS,flyBird(飞翔小鸟)
游戏开发的HelloWorld,快速入门,新手上路,使用CocosCreator+JS,flyBird(飞翔小鸟) 介绍 开发环境 游戏原理 文件结构 详细操作 全部代码 介绍 拓展什么的都没有,真正 ...
- 【前端实例代码】使用 HTML 和 CSS 如何实现惊人的透明登录框页面毛玻璃效果| 前端开发 网页制作 基础入门教程
b站视频演示效果: [web前端特效源码]使用 HTML 和 CSS 如何实现惊人的透明登录框页面毛玻璃效果| 前端开发 网页制作 基础入门教程 效果图: 完整代码: <!DOCTYPE htm ...
- ecshop二次开发的简单快速入门教程
ecshop二次开发的简单快速入门教程,具体请下载文档 ecshop_dwt_lbi_详解.rar (106 KB) 下载次数: 9 转载于:https://my.oschina.net/u/3360 ...
- 【前端实例代码】使用 HTML CSS实现指纹扫描仪特效动画效果 |前端开发 网页制作 基础入门教程 网页开发中常见的样式与特效,收藏起来肯定用的上~
b站视频演示效果: [web前端特效源码]使用 HTML CSS 和 JavaScript 实现指纹扫描仪特效动画效果 |前端开发 网页制作 基础入门教程 效果图: 完整代码: <!DOCTYP ...
最新文章
- 面试经典书籍--程序员面试宝典
- 如何防止无线网络被破解
- Authentication和Authorization的区别
- django 指定模型排除的字段
- 怎样发布一个工程到自己的GitHub
- 数据库访问接口的代码
- 巩固知识体系!mysql变量类型
- 一作解读NLPCC最佳学生论文:1200万中文对话数据和预训练模型CDial-GPT
- Git:git合并分支
- matlab里用simulink仿真教程,Matlab-Simulink仿真教程课件.ppt
- servlet中session的使用
- 【机器学习入门】(6) 随机森林算法:原理、实例应用(沉船幸存者预测)附python完整代码和数据集
- 数据库查询之对含有数字和字母的字段进行排序
- Java程序员从笨鸟到菜鸟之(五十七)细谈Hibernate(八)Hibernate集合Map关系映射
- 嵌入式简答题知识点总结
- 支付宝当面付参数获取步骤,个人申请使用支付宝当面付
- E - LEQ(树状数组)
- 【自嗨笔记#2】微博疫情舆情分析---舆情分析部分
- 多线程下载王者荣耀图片
- 单点登录 统一用户管理
热门文章
- linux:你不知道的echo
- Spring Security OAuth2.0_实现分布式认证授权_网关资源服务配置_Spring Security OAuth2.0认证授权---springcloud工作笔记152
- k8s集群部署项目_JAVA项目(部署镜像暴露应用)---K8S_Google工作笔记0062
- STM32工作笔记0020---新建工程模板基于寄存器-M3
- Android学习笔记---26_网络通信之资讯客户端,使用pull解析器,解析,从网络中获得的自定义xml文件
- java 数字的进制转换
- Setforegroundwindow 将窗口置最前
- 神奇的go语言(image网站开发)
- java应用程序做授权_java-为我的Web应用程序编写授权过滤器(JSF ...
- java电商项目的项目描述_Java电商项目-6.实现门户首页数据展示_Redis数据缓存