grunt入门讲解7:项目脚手架grunt-init
grunt-init是一个用于自动创建项目脚手架的工具。它会基于当前工作环境和你给出的一些配置选项构建一个完整的目录结构。至于其所生成的具体文件和内容,依赖于你所选择的模版和构建过程中你对具体信息所给出的配置选项。
注意:这个独立的程序曾经是作为Grunt内置的"init"任务而存在的。
安装
为了使用grunt-init,需要将其安装到全局环境中。
npm install -g grunt-init
这样就会把grunt-init命令安装到你的系统路径中,从而允许你在任何目录中都可以运行它。
用法
使用grunt-init --help来获取程序帮助以及列出可用模板清单
使用grunt-init TEMPLATE,基于可用模板创建一个项目
使用grunt-init /path/to/TEMPLATE,基于任意其他目录中可用的模板创建一个项目
注意,大多数的模板都应该在当前目录(执行命令的目录)中生成它们的文件(自动生成的项目相关的文件),因此,如果你不想覆盖现有的文件,注意一定要切换到一个新目录中。
安装模板
一旦模板被安装到你的~/.grunt-init/目录中(在Windows平台是%USERPROFILE%\.grunt-init\目录),那么就可以通过grunt-init命令来使用它们了。建议你使用git将模板克隆到项目目录中。例如, grunt-init-jquery模板可以像下面这样安装:
git clone https://github.com/gruntjs/grunt-init-jquery.git ~/.grunt-init/jquery
下面是一些有Grunt官方维护的grunt-init模板:
grunt-init-commonjs - Create a commonjs module, including Nodeunit unit tests. (sample "generated" repo | creation transcript)
grunt-init-gruntfile - Create a basic Gruntfile. (sample "generated" repo | creation transcript)
grunt-init-gruntplugin - Create a Grunt plugin, including Nodeunit unit tests. (sample "generated" repo | creation transcript)
grunt-init-jquery - Create a jQuery plugin, including QUnit unit tests. (sample "generated" repo | creation transcript)
grunt-init-node - Create a Node.js module, including Nodeunit unit tests. (sample "generated" repo | creation transcript)
定制模版
你可以创建和使用自定义模板。但是你的模板必须遵循与上述模板相同的文件结构。
下面是一个名为my-template
的模板示例,它必须遵循下面这样的常规文件结构:
my-template/template.js
- 主模板文件。my-template/rename.json
- 模板特定的重命名规则。my-template/root/
- 要复制到目标位置的目录。
假设这些文件存储在/path/to/my-template目录中,那么执行命令grunt-init /path/to/my-template,就会处理这个模板了。
此外,如果你把这个自定义模板放在你的~/.grunt-init/目录中(在Windows上是%USERPROFILE%\.grunt-init\目录),那么只需要使用grunt-init my-template命令,就可以使用这个模版了。
当执行初始化模板时, 只要模板使用init.filesToCopy
和init.copyAndProcess
方法,任何位于root/
子目录中的文件都将被复制到当前目录。注意所有被复制的文件都会被做为模板进行处理,并且所有{% %}
模板都会依据props
数据对象集合中的数据进行替换,除非设置了noProcess
选项。
rename.json用于描述sourcepath到destpath的重命名映射关系。sourcepath必须是相对于root/目录要被复制的文件路径,但是destpath值可以包含{% %}模板,用于描述目标路径是什么。如果destpath被指定为false,那么文件就不会被复制。此外,srcpath还支持通配符匹配模式。
每个初始化提示都会有一个硬编码的默认值或者它会根据当前环境来尝试确定该缺省值。如果你想覆盖某个特定提示信息的默认值,你可以在Linux的~/.grunt-init/defaults.json或者Windows的%USERPROFILE%\.grunt-init\defaults.json文件中选择性的进行处理。
例如,由于我希望使用一个与众不同的名字来替代默认的名字,并且我还希望排除我的邮箱地址,同时我还希望自动指定一个作者的url,那么我的defaults.json看起来就可能像下面这样。
{
"author_name": "\"Cowboy\" Ben Alman",
"author_email": "none",
"author_url": "http://benalman.com/"
}
注意:所有的内置提示信息都有文档,你还可以在源代码中找到他们的名字和默认值。
定义一个初始化模块,也就是template.js文件中的内容
exports.description属性的作用
当用户运行grunt init
或者grunt-init
来显示所有可用的初始化模板时,这个简短的模板描述会和模板名一起显示。比如:
exports.description = 'Create a jQuery plugin, including QUnit unit tests.';
当运行grunt init时,'Create a jQuery plugin, including QUnit unit tests.'会和模板的名字一起显示出来。
exports.notes属性的作用
如果指定了这个选项,这个可选的扩展描述将会在任何提示信息显示之前显示出来。这是一个给用户提供一些解释命名空间相关帮助信息的很好的地方。这些提示可能是必选的也可能是可选的,等等。
exports.notes = '_Project name_ should not contain "jquery" or "js" ';
exports.warnOn属性的作用
如果这个可选的通配模式或者通配模式数组有匹配项出现,Grunt将终止并生成一个警告信息。这对于初始化模板可能覆盖现有文件的情况来说是非常有用的。
exports.warnOn = '*';
最常见的值是'*'
,它能够匹配任意文件或者目录。使用minimatch通配符模式具有很大的灵活性。比如:
exports.warnOn = 'Gruntfile.js'; // 警告 on a Gruntfile.js file.
exports.warnOn = '*.js'; // 警告 on any .js file.
exports.warnOn = '.*'; // Warn on any dotfile or dotdir.
exports.warnOn = '!*/**'; // 在任何文件上发出警告,目录就不会
exports.warnOn = '*.{png,gif,jpg}'; // 警告 on any image file. // 通配符模式数组
exports.warnOn = ['*.png', '*.gif', '*.jpg'];
exports.template函数的作用
虽然exports的属性都定义在该函数的外面,然而所有实际的初始化代码都在此函数的内部。这个函数接受三个参数,grunt参数是一个grunt的引用,它包含所有的grunt方法和库。init参数是一个包含特定于这个初始化模板而存在的方法和属性的对象。done参数是在初始化模板执行完成时必须调用的函数。
exports.template = function(grunt, init, done) { // See the "Inside an init template" section. };
初始化模板的内部,也就是template函数中的内容
init.addLicenseFiles方法的作用
可以给files对象添加适当命名的许可协议证书文件。
var files = {};
var licenses = ['MIT'];
init.addLicenseFiles(files, licenses); // files === {'LICENSE-MIT': 'licenses/LICENSE-MIT'}
init.availableLicenses方法的作用
返回一个可用许可协议证书的数组:
var licenses = init.availableLicenses(); // licenses === [ 'Apache-2.0', 'GPL-2.0', 'MIT', 'MPL-2.0' ]
init.copyAndProcess方法的作用
遍历对象files中的所有文件,将源文件复制到目标路径,并处理相关内容。
init.copyAndProcess(files, props[, options])
init.destpath方法的作用
目标文件的绝对路径。
init.destpath()
init.expand方法的作用
返回一个独一无二的与给定通配符模式所匹配的所有文件或目录路径的数组。这个方法接收一个逗号分割的通配符模式或者数组形式的通配符模式参数。如果路径匹配模式以!开头,与模式所匹配的结果就会从返回的数组中排除。模式是按顺序处理的,所以包含和排除在数组中出现的顺序是非常重要的。
init.expand([options, ] patterns)
init.prompt方法的作用
给用户一个提示,并让用户输入自己选择的值。
init.prompt(name[, default])
还有很多方法的描述,这里就不细讲了。
内置提示
author_email
package.json
中的用于公开作者的邮箱地址。默认情况下会尝试从用户的git配置中找到一个默认值。
author_name
package.json
中的用于公开作者的全名和版权信息。也会尝试从用户的git配置中找到一个默认值。
author_url
package.json
中的用于公开作者个人网站的URL。
还有很多的这种默认属性值,这些属性值,我们都可以通过init.prompt方法得到,比如:
init.prompt('author_name'),
init.prompt('author_email'),
init.prompt('author_url'),
加油!
grunt入门讲解7:项目脚手架grunt-init的更多相关文章
- grunt入门讲解1:grunt的基本概念和使用
Grunt和 Grunt 插件是通过 npm 安装并管理的,npm是 Node.js 的包管理器. Grunt 0.4.x 必须配合Node.js >= 0.8.0版本使用.老版本的 Node. ...
- grunt入门讲解5:创建插件,安装Grunt以及常见问题
创建插件 创建插件主要有以下几个步骤: (1)通过 npm install -g grunt-init 命令安装 grunt-init .(2)通过 git clone git://github.co ...
- grunt入门讲解4:如何创建task(任务)
每当运行Grunt时, 你可以为其指定一个或多个任务, 这些任务用于告诉Grunt你想要它做什么事情. 如果你没有指定一个任务,并且你已经定义一个名为 "default" 的任务, ...
- grunt入门讲解6:grunt使用步骤和总结
Grunt是啥? 很火的前端自动化小工具,基于任务的命令行构建工具. Grunt能帮我们干啥? 假设有这样一个场景: 编码完成后,你需要做以下工作 HTML去掉注析.换行符 - HtmlMin CSS ...
- grunt入门讲解3:实例讲解使用 Gruntfile 配置任务
这个Gruntfile 实例使用到了5个 Grunt 插件: grunt-contrib-uglify grunt-contrib-qunitgrunt-contrib-concatgrun ...
- grunt入门讲解2:如何使用 Gruntfile 配置任务
Grunt的task配置都是在 Gruntfile 中的grunt.initConfig方法中指定的.此配置主要包括以任务名称命名的属性,和其他任意数据.一旦这些代表任意数据的属性与任务所需要的属性相 ...
- Grunt入门
Grunt 新手一日入门 2014.06.20 前端相关 TOC 1. 用途和使用场景 2. 开发一个任务自动处理器 3. 开始学习 Grunt 3.1. 安装 Grunt 3.2. 生成 packa ...
- Grunt打包之seajs项目【转】
原文:http://www.cnblogs.com/accordion/p/4508154.html grunt与seajs grunt是前端流行的自定义任务的脚手架工具,我们可以使用grunt来为我 ...
- 前端构建工具 Grunt 入门
之前也介绍过前端构建工具 Ant 和 Yeoman,其中 Yeoman 工具就包含了 Grunt 所以就不多说.那么与 Ant 相比 Grunt 有这么几个优点: Javascript 语法,相比 A ...
随机推荐
- 在vivado中自定义编辑器
在 Tools - Options - Text Editor 中选择 Custom Editor 这里我用的gvim,在Editor文本框中输入: C:/Vim/vim80/gvim.exe --r ...
- 批量生成文件夹内所有文件md5
说明:md5批量生成批处理脚本,无需安装任何软件,直接调用系统文件进行生成,简单基于windows命令编写了一个批量生成md5值的脚本. 使用说明:新建文本文档,命名为get_md5.bat,直接将代 ...
- webBrowser.Document.Cookie取不到HttpOnly的Cookie,取Cookie不完整
在做数据采集时,有些网站需要输入验证码,但各网站验证码都不同,不可能有完美的识别验证码的代码,所以我也没去研究,我所采取的方案是:在winform里通过WebBrowser调用网页先手动登录系统,然后 ...
- 20145207 2016-2017《Java程序设计》课程总结
20145207 2016-2017<Java程序设计>课程总结 目录 一.每周作业及实验报告链接汇总 二.关于博客 自认为写得最好一篇博客是?为什么? 作业中阅读量最高的一篇博客是?谈谈 ...
- 【BZOJ1050】[HAOI2006]旅行
[BZOJ1050][HAOI2006]旅行 题面 bzoj 洛谷 题解 先将所有边从小往大排序 枚举钦定一条最小边 再枚举依次枚举最大边,如果两个点联通了就\(break\)统计答案即可 代码 #i ...
- Kubernetes学习之路(七)之Coredns和Dashboard二进制部署
一.CoreDNS部署 在 Cluster 中,除了可以通过 Cluster IP 访问 Service,Kubernetes 还提供了更为方便的 DNS 访问. (1)编辑coredns.yaml文 ...
- Winform下的语言国际化,几行代码轻松实现
最近做了一些关于winform的项目,需要用到winform的语言国际化,在初使化的时候用起来非常方便.可以参考一下: 核心逻辑: 预览效果演示: OK,以下是核心代码和操作流程 一,添加Langua ...
- virtualBox linux centos 挂载u盘 解决乱码
linux 挂载u盘 环境:虚拟机virtualBox5.2.8 linux centos6.5 64bit 第一步:插入u盘 第二步:virtualBox 设置启用u盘 提示:如果不知道哪个是你u盘 ...
- WebGL——水波纹特效
大家好,今天我ccentry要做一个水波纹特效,我们来看看水波纹特效的做法.首先我们来看一下水波纹特效的效果是怎么样的,请看下图. 我们要做的就是类似这种纹理特效,那么我们来看看是如何制作的吧.首先鲫 ...
- UGUI实现不规则区域点击响应
UGUI实现不规则区域点击响应 前言 大家吼啊!最近工作上事情特别多,没怎么打理博客.今天无意打开cnblog才想起该写点东西了.今天给大家讲一个Unity中不规则区域点击响应的实现方法,使用UGUI ...