Grunt 入门使用
来源:互联网 发布:创想电玩淘宝店靠谱吗 编辑:程序博客网 时间:2024/06/05 15:13
grunt 好处
grunt是一种自动化构建工具,类似java的maven。
一句话:自动化。对于需要反复重复的任务,例如压缩(minification)、编译、单元测试、linting等,自动化工具可以减轻你的劳动,简化你的工作。当你在 Gruntfile 文件正确配置好了任务,任务运行器就会自动帮你或你的小组完成大部分无聊的工作
grunt 安装
1.在开始使用grunt之前,需要安装Grunt Command Line Interface(CLI),以便能够全局性的在本地机器上的任何文件夹中使用grunt命令行工具。Grunt CLI 工具可以使你在不同的项目文件夹中运行不同版本的Grunt任务运行器。(以下命令只针对win和linux系统,linux系统执行一般需要sudo提升权限)。 npm install -g grunt-cli
npm参见npm具体使用 -g 安装在本地库。
2. Grunt CLI工具、Grunt任务运行器以及它的每个插件任务都是Node.js软件包,部署于npm目录。要下载Grunt任务运行器工具在具体项目中使用,请在项目所在的文件夹中执行以下命令(若文件夹中没有package.json文件,请运行npm init 创建一个)。 npm install grunt --save-dev
参数 –save-dev 的使用会把下载的特定版本的Grunt软件包的引用自动保存在package.json文件的devDependencies属性下。这是为了表明,Grunt用于开发,而不是项目本身运行所需要的软件包。
3. 安装插件示例。插件名称中的“contrib”部分表示此插件是Grunt的一个官方插件。 npm install grunt-contrib-jshint --save-dev
JSHint用于对JavaScript文件的静态代码分析。
Grunt 任务配置
Grunt 配置通过一个配置文件实现,必须命名为Gruntfile.js,并应该放在项目的根目录下,即与package.json文件在同一目录位置。
Gruntfile 是一个标准的JavaScript文件。 应该将其作为Node.js模块进行配置。对于要能从Gruntfile外部访问Gruntfile内的代码,必须将其设置在Gruntfile的module.exports 属性内。
1. Gruntfile.js 大体结构,应该以一个包裹函数进行初始化,通过grunt参数提供对Grunt API的访问,然后通过module.exports属性实现公共访问。所有的Grunt配置必须设定放在此函数体中。这里以Grunt中配置JSHint为例。
module.exports = function(grunt){ //这里是配置内容,grunt参数包含着Grunt API的方法}
2.使用Grunt API中的initConfig()方法配置具体的插件任务。在该方法中插入的每一个JavaScript对象对应一个插件任务,对象的属性内容是对该插件任务的配置信息。对于JSHint插件,使用属性名称为jshint。琐事多用的准确任务名称会在所选择的插件的文档中进行详细说明。有时插件设置会改动,以插件官档最新配置为准。JSHint 文档
grunt.initConfig({ jshint: { options: { strict:true, }, src: ["Gruntfile.js","script/**/*.js"] }});
3.在配置文件中,加载插件任务。 grunt.loadTasks("grunt-contrib-jshint")
4.管理任务列表。在执行Grunt命令时,要指定运行任务的别名(不加别名,则默认执行别名为“default”的任务)。要简单管理任务列表(如执行顺序),可以通过定义别名任务名称并关联到一系列任务来实现。别名在Grungfile中使用Grunt API中的registerTask()方法进行注册。一般在文件末尾注册别名。 grunt.registerTask("default",["jshint",])
简单Gruntfile.js示例。
module.exports = function(grunt){ //这里是配置内容,grunt参数包含着Grunt API的方法 grunt.initConfig({ jshint: { options: { strict:true, }, src: ["Gruntfile.js","script/**/*.js"] } }); grunt.loadTasks("grunt-contrib-jshint") ; grunt.registerTask("default",["jshint",])}
运行grunt
- 运行default别名的任务:
grunt
- 运行单独任务或别名任务(一个或多个单独任务的组合),直接在命名行指定任务或别名任务。
grunt jshint 或 grunt default
扩展grunt配置
grunt 支持json数据文件导入、以可替代的配置设定来适应不同需求的多任务。如把package.json文件的内容加载至Gruntfile,把返回值设定配置对象中的pkg属性,并把pkg插入initConfig()方法中使用。
grunt.initConfig(){ pkg:grunt.file.readJSON("package.json"); jshint: { options: { strict:true, }, //package.json有name和version属性 src: ["Gruntfile.js","script/**/*.js","<%= pkg.name %>-<%= pkg.version %>.js"] }};
多任务和多目标
Grunt 支持吧每一个任务的配置信息划分至若干个单独的配置内容中,已实现不同的任务具体配置选项,来适应不同的使用场合。例如,对不同的文件应用不同的设定,此特性称作多任务。具体实现实在每一个插件配置中增加一个额外的命名对象属性。每一个这样的多任务配置对象称作一个目标。
grunt.initConfig(){ pkg:grunt.file.readJSON("package.json"); jshint: { options: { strict:true, }, grunt:{ src: ["Gruntfile.js","script/**/*.js","<%= pkg.name %>-<%= pkg.version %>.js"], } project:{ options:{ trailing:true, }, src: ["Gruntfile.js","script/**/*.js","<%= pkg.name %>-<%= pkg.version %>.js"], } }};
运行多目标
grunt jshint:project
编写Grunt插件
暂时用不着,仅提供参考网址。Grunt 插件参考
引用
grunt 中文网
精通javascript开发
- Grunt使用学习入门
- Grunt 入门使用
- 【Grunt】Grunt打包入门
- grunt入门
- Grunt入门
- Grunt 入门
- Grunt入门
- grunt入门
- Grunt-Grunt使用
- grunt使用
- grunt使用
- grunt使用
- grunt 使用
- 常用插件的使用—grunt入门指南之三
- grunt入门指南之三 常用插件的使用
- grunt入门讲解3:实例讲解使用 Gruntfile 配置任务
- grunt入门讲解3:实例讲解使用 Gruntfile 配置任务
- grunt 入门笔记
- 学会选择器的搭配
- 为什么Apache里没有www目录?
- java调用聚合数据接口
- 网站漏洞扫描工具Uniscan
- JAVA SE面试题(全)
- Grunt 入门使用
- 自己进化的Unity人工智能(三)
- 关于spring boot 内嵌tomcat 在window上启动,处理请求卡死---阿里云服务器有瑕疵
- QQ列表展开收缩扩展(自定义属性,索引值练习)
- linux服务器inode节点占用过高
- 多态
- solr安装配置,两种方法
- 注释最全的Android购物车简单实现,复制可用,阅读可懂
- 排序-选择排序