Grunt备忘录
一、安装Grunt
应在全局环境下安装Grunt,以保障在任何目录下都能够正确找到grunt
npm install grunt-cli -g
二、对已有Grunt基本目录结构文件进行操作
Grunt需要的基本文件有:
1. Gruntfile.js。Grunt需要的基本配置文件。该文档标识了执行grunt命令时会执行的内容。
2. package.json。实际为node.js的当前project信息配置文件,特别是其中的包依赖dependencies非常重要。每次npm install实际上都是对其的重新pull及更新。
关于基本文件Gruntfile.js的详细教程参考http://www.gruntjs.org/article/sample_gruntfile.html
若当前目录已满足条件,在开发时进行如下步骤即可:
1.npm install (grunt --save -dev)
括号内容可省略。根据package.json的内容安装或更新依赖包。其中的grunt --save -dev实际上时调用grunt,将变更的依赖信息自动加入到基本文件中,否则需要手动更新。
2.grunt
执行grunt使得grunt插件,如concat、jshint等生效。执行过程会找到default自动执行里面的内容。具体原理参考上文提供的详细教程。
执行前应注意gruntfile中的default指向序列,防止出错。
3.grunt watch
watch为grunt的一个插件,需要在之前的步骤中随其他插件预先配置安装。即在grunt基本稳健配置时就应已经配置好。具体插件的安装方法在后续的“空目录初始化”部分会介绍到。
在对project进行任何修改操作前,应先运行watch监控代码,watch会对监控的代码的任何修改自动进行指定步骤,其配置文件在gruntfile中。
4.ctrl +c
在代码编辑完后,应先退出watch,然后进行正常的代码提交。
三、Grunt目录初始化
第一种方法
如第二部分所示,grunt目录的基本结构至少包含两个文件,这两个文件是可以手动配置的,具体仍可参考上文第一部分给出的链接。这里说一下如何自动化生成该目录。
Grunt本身包含四种默认的模板,即gruntfile、commonjs、jquery、node,具体详见http://www.cnblogs.com/lhb25/archive/2013/01/24/grunt-for-javascript-project-a.html
1. npm install grunt -init -g
全局安装grunt默认模板。
2. grunt-init gruntfile
第二种方法
对于工程目录的初始化也可以采用以下方式:
grunt init:gruntflie
进入空的工程目录,对该目录使用默认模板gruntfile进行初始化。初始化完毕后可以发现目录下多了两个基本文件。
初始化目录后,由于已经存在基本结构,所以可以针对基本结构进行自行修改。后续操作可以参考第二部分。
//初学grunt,如有错误请指出,谢谢。
Grunt备忘录的更多相关文章
- 初学seaJs模块化开发,利用grunt打包,减少http请求
原文地址:初学seaJs模块化开发,利用grunt打包,减少http请求 未压缩合并的演示地址:demo2 学习seaJs的模块化开发,适合对seajs基础有所了解的同学看,目录结构 js — —di ...
- MementoPattern(备忘录模式)
/** * 备忘录模式 * @author TMAC-J * 用于存储bean的状态 */ public class MementoPattern { public class Memento{ pr ...
- grunt配置任务
这个指南解释了如何使用 Gruntfile 来为你的项目配置task.如果你还不知道 Gruntfile 是什么,请先阅读 快速入门 指南并看看这个Gruntfile 实例. Grunt配置 Grun ...
- 快速开发Grunt插件----压缩js模板
前言 Grunt是一款前端构建工具,帮助我们自动化搭建前端工程.它可以实现自动对js.css.html文件的合并.压缩等一些列操作.Grunt有很多插件,每一款插件实现某个功能,你可以通过npm命名去 ...
- 是时候搁置Grunt,耍一耍gulp了
也算是用了半年Grunt,几个月前也写过一篇它的入门文章(点此查看),不得不说它是前端项目的一个得力助手.不过技术工具跟语言一样日新月异,总会有更好用的新的东西把旧的拍死在沙滩上(当然Grunt肯定没 ...
- 应用Grunt自动化地优化你的项目前端
在不久前我曾写了一篇 应用r.js来优化你的前端 的文章,为大家介绍了r.js这个实用工具,它可以很好地压缩.合并前端文件并打包整个项目.但是如果将r.js放到项目中,我们不得不顾及到一个问题——项目 ...
- C#设计模式-备忘录模式
访问者模式的实现是把作用于某种数据结构上的操作封装到访问者中,使得操作和数据结构隔离.而本文要介绍的备忘者模式与命令模式有点相似,不同的是,命令模式保存的是发起人的具体命令(命令对应的是行为),而备忘 ...
- Vuex2.0+Vue2.0构建备忘录应用实践
一.介绍Vuex Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化,适合于构建中大型单页应用. ...
- Grunt(页面静态引入的文件地址的改变探究)-V2.0
相关插件的引用: grunt-usemin 对页面的操作 grunt-contrib-cssmin 压缩css load-grunt-tasks 瘦身gruntfile grunt-rev给md5 ...
随机推荐
- (转)as3效率优化
1.改进算法无论对于那一种程序,好的算法总是非常重要的,而且能够极大地提高程序性能,所以任何性能的优化第一步就是从算法或者说程序逻辑的优化开始,检查自己的程序是否有多余的运算,是否在没有必要的时候做了 ...
- java实现BitMap
package bitmap; public class BitMap { private byte[] bytes; public BitMap(byte[] bytes) { super(); t ...
- 演示一个导致ora-01555错误的场景
1创建一个undo表空间 2查看当前undo配置 3更该默认undo表空间 4确认更改的配置 5创建一张测试表 6模拟批量操作 7 查询2分钟前的数据 从这里可以到当查询2分钟前的数据时候,系统报出O ...
- 函数响应式编程(FRP)—基础概念篇
原文出处:http://ios.jobbole.com/86815/. 一函数响应式编程 说到函数响应式编程,就不得不提到函数式编程,他们俩有什么关系呢?今天我们就详细的解析一下他们的关系. 现在下面 ...
- # 20145334 《Java程序设计》第9周学习总结
20145334 <Java程序设计>第9周学习总结 教材学习内容总结 第十六章 整合数据库 JDBC 1.Java语言访问数据库的一种规范,是一套API. 2.JDBC (Java Da ...
- 20145337实验三实验报告——敏捷开发与XP实践
20145337实验三实验报告--敏捷开发与XP实践 实验名称 敏捷开发与XP实践 实验内容 XP基础 XP核心实践 相关工具 ** 实验步骤**### 敏捷开发与XP 软件工程包括下列领域:软件需求 ...
- MyEclipse安装lombok
1. 将lombok.jar复制到myeclipse.ini所在的文件夹 2. 打开myeclipse.ini,插入以下两行: -Xbootclasspath/a:lombok.jar-javaage ...
- BizTalk动手实验(四)Schema开发测试
1 课程简介 通过本课程熟悉Schema的相关开发技术 2 准备工作 1. 熟悉XML.XML Schema.XSLT等相关XML开发技术 2. 新建BizTalk空项目 3 演示 3.1 格式化XM ...
- BizTalk开发系列(二十) 类型作用域
Orchestration中的Type概念跟.NET 里的Class一样,可以在Orchestration开过过程中将多个实例绑定到一种类型.Orchestration 视图里包括的类型有Port T ...
- Jquery的命名冲突
$是Jquery的别名,为了编码方便,我们可以使用$符号来调用Jquery的函数.然而,当我们引入多个JS库的时候,如果另外一个库中也引用了$符号作为别名的话,那么我们在使用$符号的时候,由于同一个作 ...