一、安装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备忘录的更多相关文章

  1. 初学seaJs模块化开发,利用grunt打包,减少http请求

    原文地址:初学seaJs模块化开发,利用grunt打包,减少http请求 未压缩合并的演示地址:demo2 学习seaJs的模块化开发,适合对seajs基础有所了解的同学看,目录结构 js — —di ...

  2. MementoPattern(备忘录模式)

    /** * 备忘录模式 * @author TMAC-J * 用于存储bean的状态 */ public class MementoPattern { public class Memento{ pr ...

  3. grunt配置任务

    这个指南解释了如何使用 Gruntfile 来为你的项目配置task.如果你还不知道 Gruntfile 是什么,请先阅读 快速入门 指南并看看这个Gruntfile 实例. Grunt配置 Grun ...

  4. 快速开发Grunt插件----压缩js模板

    前言 Grunt是一款前端构建工具,帮助我们自动化搭建前端工程.它可以实现自动对js.css.html文件的合并.压缩等一些列操作.Grunt有很多插件,每一款插件实现某个功能,你可以通过npm命名去 ...

  5. 是时候搁置Grunt,耍一耍gulp了

    也算是用了半年Grunt,几个月前也写过一篇它的入门文章(点此查看),不得不说它是前端项目的一个得力助手.不过技术工具跟语言一样日新月异,总会有更好用的新的东西把旧的拍死在沙滩上(当然Grunt肯定没 ...

  6. 应用Grunt自动化地优化你的项目前端

    在不久前我曾写了一篇 应用r.js来优化你的前端 的文章,为大家介绍了r.js这个实用工具,它可以很好地压缩.合并前端文件并打包整个项目.但是如果将r.js放到项目中,我们不得不顾及到一个问题——项目 ...

  7. C#设计模式-备忘录模式

    访问者模式的实现是把作用于某种数据结构上的操作封装到访问者中,使得操作和数据结构隔离.而本文要介绍的备忘者模式与命令模式有点相似,不同的是,命令模式保存的是发起人的具体命令(命令对应的是行为),而备忘 ...

  8. Vuex2.0+Vue2.0构建备忘录应用实践

    一.介绍Vuex Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化,适合于构建中大型单页应用. ...

  9. Grunt(页面静态引入的文件地址的改变探究)-V2.0

    相关插件的引用: grunt-usemin  对页面的操作 grunt-contrib-cssmin  压缩css load-grunt-tasks 瘦身gruntfile grunt-rev给md5 ...

随机推荐

  1. 如何打印出lua里table的内容

    不像开发as3时用fb有强大的断点调试功能,一般lua开发不用什么高级的ide,貌似也没有适合的,就直接用sublime.exvim等文本编辑器,直接编译运行看结果.所以不能很方便的知道变量值,特别是 ...

  2. R中创建not-yet-evaluated对象

    create not-yet-evaluated object在R中创建 not-yet-evaluated(就是some code we will evaluated later!!)对象;然后执行 ...

  3. 格式与布局 CSS阴影效果(Box-shadow)用法

    一.position:fixed 锁定位置(相对于浏览器的位置),例如有些网站的右下角的弹出窗口. 二.position:absolute 1.外层没有position:absolute(或relat ...

  4. ASP.NET发布后,功能不响应

    题记:稀奇古怪的错误,往往是由低级脑残错误产生的 ASP.NET网站,本地调试一切正常.部署到服务器后,结果登陆按钮就卡住了,点击就是没反应. 浏览器显示Internal Server Error 5 ...

  5. 【HDU1914 The Stable Marriage Problem】稳定婚姻问题

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1914 题目大意:问题大概是这样:有一个社团里有n个女生和n个男生,每位女生按照她的偏爱程度将男生排序, ...

  6. 2016HUAS暑假集训训练2 F - A Simple Problem with Integers

    Description 给出了一个序列,你需要处理如下两种询问. "C a b c"表示给[a, b]区间中的值全部增加c (-10000 ≤ c ≤ 10000). " ...

  7. SVN 远程无法联通

    远程花生壳搭建之后,配置在服务器iis上的其他的网站都能访问,局域网都可以,就是SVN远程连接不通. 没有搞过这样的问题,一下就不知道怎么办了.网上也没有人搞过,然后想到以前公司的一个大神搞过,然后请 ...

  8. IOS第九天(2:QQ聊天界面键盘优化 和自动回复)

    ***********controller.m #import "HMViewController.h" #import "HMMessageModel.h" ...

  9. EL表达式与JSTL

    内容包括 EL表达式 EL函数库 JSTL 核心标签库 格式化标签库 SQL标签库 XML标签库 自定义标签库 EL表达式 EL是Expression Language的是缩写,是JSP页面编写的一种 ...

  10. Python强化训练笔记(一)——在列表,字典,集合中筛选数据

    列表,字典,集合中根据条件筛选数据,如下所示 列表:[-10,2,2,3,-2,7,6,9] 找出所有的非负数 字典:{1:90,2:55,3:87...} 找出所有值大于60的键值对 集合:{2,3 ...