Grunt之项目脚手架

在网上搜了下,grunt这方面的教程挺少的,来去都是一些被频繁转载的文章。唉,

首先我们在全局环境中安装grunt-init。

npm install -g grunt-init

来看看官方的文档,举几个例子,看看grunt-init是如何使用的:

1、使用grunt-init --help来获取程序帮助以及列出可用模板清单

2、使用grunt-init TEMPLATE基于可用模板创建一个项目

3、使用grunt-init /path/to/TEMPLATE基于任意其他目录中的可用模板创建

为了更好的理解grunt-init是如何使用的,我们首先安装下模板。

Grunt官方维护了一些grunt-init模板,这里列举一些吧。

grunt-init-commonjs、grunt-init-gruntfile、grunt-init-jquery、grunt-init-node.

在这里我们拿最基本的grunt-init-gruntfile来练手。

运行如下命令(windows下的同学请先安装git,重击这里:http://msysgit.github.io/),克隆 gruntfile模板到本地目录(目录可自选)。

Ok,这个时候我们可以看到在.grunt-init目录下生成了gruntfile文件夹.

这其中包含了一些文件。template.js是我们的主模板文件,如果你想要自定义一个模板,那么这个文件是不可或缺的。

root文件夹是你要复制到目标位置的文件,在gruntfile模板中,里面只包含有Gruntfile.js文件。

这个时候我们来试着运行一下模板文件。

在我们新建一个gruntInitTest项目,在其目录下运行如下命令:

grunt-init gruntfile

运行完成之后,我们可以看到Gruntfile.js已经生成在项目文件夹下了。

就是这样简单!

~~~~~~~~~~~~~~~~~~~~~~无力吐槽的分割线~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

在学习了如何安装运行模板之后,我们再来看看,如何创建一个自己的模板。

我们新建一个自定义的模板,命名为myTemplate。

这个模板我建立在系统的.grunt-init目录下,这样,在运行grunt-init命令时,就不需要敲上一大堆的路径了,直接‘grunt-init xxx’(xxx是你自己的模板名称)就行了,简单快捷。

查阅官网的资料,我写了个简单的template.js文件,代码如下:


 1 /*
2 * just for test
3 */
4 ‘use strict‘;
5 // 基本的模板描述,当用户运行grunt init或grunt-init时显示
6 exports.description = ‘Create a ckTemp.‘;
7 // 给用户展示的一些信息[可选参数]
8 exports.notes = ‘‘;
9 // 通过可选的通配模式或者通配模式数组,对目录下的文件进行匹配,若匹配,grunt将终止并生成一个警告信息,防止可能出现的文件覆盖
10 exports.warnOn = [‘*‘];
11 //init
12 exports.template = function(grunt, init, done) {
13 init.process({}, [
14 init.prompt(‘projectName‘,‘Godzilla‘),
15 init.prompt(‘licenses‘, ‘MIT‘),
16 init.prompt(‘author_name‘),
17 init.prompt(‘author_email‘)
18 ], function(err, props) {
19 // 返回一个包含待复制文件的对象,每个文件都包含了源文件的绝对路径和目标文件的相对路径,并按照rename.json(如果存在)中的规则进行重命名(或者忽略)。
20 var files = init.filesToCopy(props);
21 // 给files对象添加许可协议证书文件.
22 init.addLicenseFiles(files, props.licenses);
23 // 复制并处理root下的文件(root下所有{%%}模板都会依据props数据对象集合中的数据进行替换,除非设置了noProcess选项)
24 init.copyAndProcess(files, props);
25 //init.copyAndProcess(files, props, {noProcess: ‘html/**‘});
26 //在这里也可以使用init.writePackageJSON来生成package.json,以供grunt使用
27 init.writePackageJSON(props.projectName+‘.json‘, props);
28 //done
29 done();
30 });
31 };

更多的参数说明,请大家去官网查阅,这里我就不一一说明了。

建立好template.js文件后,我们新建一个项目Godzilla(哥斯拉)。

在项目下运行grunt-init命令

这个时候在项目下就生成了我们需要的文件了。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~结束前的分割线~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

通过grunt-init我们可以很方便快捷的建立我们的工程项目,想想前端开发还在刀耕火种的那个年代,再到今日,感慨万千啊。

真心感想那些无私奉献的可爱前端er,如果不是他们,前端依然处在石器时代,黑暗继续笼罩大地,黎明遥遥无期。

愿上帝保佑他们,Amen。

时间: 2024-10-12 14:10:22

Grunt之项目脚手架的相关文章

grunt入门讲解7:项目脚手架grunt-init

grunt-init是一个用于自动创建项目脚手架的工具.它会基于当前工作环境和你给出的一些配置选项构建一个完整的目录结构.至于其所生成的具体文件和内容,依赖于你所选择的模版和构建过程中你对具体信息所给出的配置选项. 注意:这个独立的程序曾经是作为Grunt内置的"init"任务而存在的. 安装 为了使用grunt-init,需要将其安装到全局环境中. npm install -g grunt-init这样就会把grunt-init命令安装到你的系统路径中,从而允许你在任何目录中都可以运

手写Maven的archetype项目脚手架

一.背景 maven是一个很好的代码构建工具,采用“约定优先于配置”的原则进行项目管理,相信很多的java开发者应该都了解maven并可能在工作当中都是通过maven来管理项目的,在创建的项目的时候,我们往往会使用maven内置的项目骨架也就是archetype来快速生成项目结构.但是在一个团队做开发的过程中,可能仅仅依靠maven预先提供的archetyp可能是不够的,团队之间协作有自己的定义方式,每个人的结构定义风格也不尽相同,在这样的背景下我们有必要去定义一个统一的代码骨架供团队使用,这样

Window服务项目脚手架

本人最近工作用到window服务程序,于是尝试分享下经验,开源了一个window服务脚手架项目,把window服务程序必不可少的组件集成进去,如日志组件log4net,window服务挂在后台,用日志的方式监测程序运行状态是必不可少的.还有任务调度组件Quartz,window服务需要长时间运行,或定时运行,都是少不了它的. 同时本人将window服务的安装工具,和快捷安装脚本都提供了. 开源项目地址: https://coding.net/u/xuzimian/p/WindowServiceS

基于 vue 全家桶的 spa 项目脚手架

项目简介 Github: https://github.com/hanan198501/vue-spa-template 我们基于 vue-cli 脚手架生成项目模板做了一些改造,加入了 vue-router ,vuex 等配套设施,本地 dev server 中加入了接口 mock 功能,还增加一个 build server 来预览 build 结果页面,前后端通过 spa 的方式实现分离,并相应做了分离后的联调,部署方案.通过这个项目模板,可以快速搭建起用于前后端分离后的单页应用开发环境,项

Vue.js项目脚手架构建

vue.js文档:https://cn.vuejs.org/v2/guide/ 参考这个或者参考菜鸟教程也可以,不过还是那句话官网权威. 我这个主要是看相关的学习视频搭建的. 一.环境准备 环境准备(node.js环境): 脚手架环境:vue-cli 执行如下命令安装: npm install vue-cli -g 或者cnpm install vue-cli -g 安装成功后在在命令行里输入vue,出现如图表示OK 二.项目初始化 vue init webpack project-name 例

发现个很有意思的angularjs +grunt 复习项目

最近作运维工作 docker 接触到一个开源webui dockerui 原项目地址 https://github.com/crosbymichael/dockerui 用angular框架实现,项目结构很简单,纯粹的前端js web项目. 迁移到了本地 (全是人家的代码, 只作了少量修改,学习备用) https://github.com/cclient/study-angu-grunt

Grunt javascript世界的构建工具(二)——Grunt项目实战 (by vczero)

一.前言 继上篇:Grunt javascript世界的构建工具(一)——Grunt使用入门,这次用一个开源项目的Grunt例子作为述说.现在互联网公司大型的JS项目,如web app.PC.前端工程庞大的项目都在使用Grunt,有了Grunt利剑在手你才能说自己能够快速的构建前端功能,当然不是专职的前端团队除外,不过呢,还是极力向你推荐Grunt.如今,Grunt作为团队的前端工具已是标配了,不论是JS API.还是web app等等.废话不多说,这里举的例子是heatmap.js的grunt

使用vue-cli脚手架安装和webpack-simple模板项目生成

Vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目. GitHub地址是:https://github.com/vuejs/vue-cli 一.安装Nodejs首先需要安装Node环境. 安装完成之后,可以在命令行工具中输入node -v和npm -v,如果能显示出版本号,就说明安装成功. 二.安装vue-cli 安装好node之后,我们就可以直接全局安装vue-cli: npm install -g vue-cli 使用这种方式可能会安装

Grunt 前端自动化开发流程 实现笔记

Grunt 是基于Node.js环境下的 项目脚手架,用于快速搭建项目文件与目录,以及提供各种插件来自动化解决开发过程中的常用程序,比如 代码压缩,代码检测,单元测试等.... Grunt的安装首先你得确保你安装了node环境,如果没有安装,请移步 http://www.nodejs.org/download/ (新手请下载exe安装包一键安装免折腾); 建议将项目放入本地服务器,因为Grunt部分插件需要在服务器环境下才能正常运行; Grunt的三大组成部分: pakeage.json //