在描述源码路径的时候,经常有一些特殊的奇怪的要求.Grunt 通过内建的 node-glob 和 minimatch 库提供了文件名的扩展机制. 常见的通配符如下: * 匹配除了 / 之外的任意数量的数字和字符 ? 匹配除了 / 之外的单个字符 ** 匹配任意数量的字符,包括 /,这样可以包含任意级的路径 {} 提供一个以逗号 (,) 分割的或表达式列表 ! 放在表达式的开头表示取反 比如,foo/*.js 将会匹配 foo/ 文件夹下面的所有 .js 扩展名的文件,而 foo/**/*.js…

最近使用了很多 Grunt 插件,这里把使用 Grunt 中涉及的从开发.代码检查.单元测试.E2E 测试,直到发布所涉及的插件,做一个比较完全的汇总. 环境搭建 1. 创建 Web 前端开发环境 2. Grunt 之通配符 3. Grunt 之动态文件路径 grunt 源码分析 1. grunt源码解析:整体运行机制&grunt-cli源码解析 grunt 插件 1. Grunt 之 Connect 2. Grunt 之 watch 和 livereload 3. Grunt 之 使用 Jav…

现在 watch 中已经集成了 livereload ,所以把它们放在一起说明. watch 可以监控特定的文件,在添加文件.修改文件.或者删除文件的时候自动执行自定义的任务,比如 livereload 等等. 1. 安装 项目定义在 GitHub 上,地址:https://github.com/gruntjs/grunt-contrib-watch 可以通过 NPM 直接进行安装 npm install grunt-contrib-watch --save-dev 安装之后,需要在 Grunt…

Grunt 之 watch 和 livereload 现在 watch 中已经集成了 livereload ,所以把它们放在一起说明. watch 可以监控特定的文件,在添加文件.修改文件.或者删除文件的时候自动执行自定义的任务,比如 livereload 等等. 1. 安装 项目定义在 GitHub 上,地址:https://github.com/gruntjs/grunt-contrib-watch 可以通过 NPM 直接进行安装 npm install grunt-contrib-watc…

本文主要讲通配符和模板的基本使用方法. 一 通配符 通常分别指定所有源文件路径是不切实际的,因此Grunt通过内置支持node-glob 和 minimatch 库来匹配文件名(又叫作globbing). 然这并不是一个综合的匹配模式方面的教程,你只需要知道如何在文件路径匹配过程中使用它们即可: * 匹配任意数量的字符,但不匹配 / ? 匹配单个字符,但不匹配 / ** 匹配任意数量的字符,包括 /,只要它是路径中唯一的一部分 {} 允许使用一个逗号分割的“或”表达式列表 ! 在模式的开头用于排…

这个指南解释了如何使用 Gruntfile 来为你的项目配置task.如果你还不知道 Gruntfile 是什么,请先阅读 快速入门 指南并看看这个Gruntfile 实例. Grunt配置 Grunt的task配置都是在 Gruntfile 中的grunt.initConfig方法中指定的.此配置主要是以任务名称命名的属性,也可以包含其他任意数据.一旦这些代表任意数据的属性与任务所需要的属性相冲突,就将被忽略. 此外,由于这本身就是JavaScript,因此你不仅限于使用JSON:你可以在这里…

相关插件的引用: grunt-usemin  对页面的操作 grunt-contrib-cssmin  压缩css load-grunt-tasks 瘦身gruntfile grunt-rev给md5加密 实际的使用场景:压缩css文件到指定目录,并且更改页面引用的外链(这里以css为例). 情景一:html页面与要操作的css在同一目录下,且也与操作后的css在同一目录下. **这里使用npm中的注释方式来操作外链的,扩展性很不好. Gruntfile.js内容如下: module.expor…

grunt与seajs grunt是前端流行的自定义任务的脚手架工具,我们可以使用grunt来为我们做一些重复度很高的事情,如压缩,合并,js语法检查等.通过定义grunt的配置文件Gruntfile.js,配置并注册grunt的任务,最终我们可以通过命令行来执行任务. seajs主要用于模块化,通过define定义一个模块,可以通过require加载模块,exports导出模块.具体的seajs实现可通过本博客的系列博文--Seajs源码解析系列来进一步了解. 在实际生产中,如果紧紧定义一系列…

安装 Grunt基于Node.js,安装之前要先安装Node.js,然后运行下面的命令. sudo npm install grunt-cli -g grunt-cli表示安装的是grunt的命令行界面,参数g表示全局安装. Grunt使用模块结构,除了安装命令行界面以外,还要根据需要安装相应的模块.这些模块应该采用局部安装,因为不同项目可能需要同一个模块的不同版本. 首先,在项目的根目录下,创建一个文本文件package.json,指定当前项目所需的模块.下面就是一个例子. { "name&q…

前端工作流,Grunt上手指南 Posted@2013-04-20 7:15 a.m. CategoriesGrunt ,  javascript 我想先花点时间回忆一下作为一个前端需要做的工作(Loading...) JS合并 JS压缩 CSS压缩 CSS Sprite 图片优化 测试 静态资源缓存(版本更新) ... 对应的,一个全副武装的前端可能会是这样的: JSHint CSSLint Jade CoffeeScript RequireJS/SeaJS Compass/Stylus/Le…