本文主要讲Grunt任务配置. 说明:本文所有示例都基于Grunt 0.4.5版本. 一 说明 使用Grunt实现项目的打包等工程化工作,实际上是通过Grunt提供的机制和插件,配置一个个任务(例如:拷贝内容.混淆压缩.格式检查.清除等),当输入grunt命令时,就逐个执行配置好的任务,从而实现项目打包等工程化工作. Grunt的任务配置都是在 Gruntfile.js文件 中的grunt.initConfig(configObj)参数configObj中指定的.如果你还不知道 Gruntfil…

什么是grunt?  Grunt是一个JavaScript任务运行器,用于自动执行频繁任务(如压缩,编译,单元测试)的工具.它使用命令行界面来运行在文件中定义的自定义任务(这个文件称为Gruntfile). Grunt由Ben Alman创建,用Node.js编写.它通过npm分发.现在,Grunt生态系统中有超过5,000个插件可用. 如何使用grunt? 基本概念 1.CLI(Command-line interface):Grunt的命令行界面(CLI)可以通过npm全局安装.执行grun…

1. 在使用grunt前需要执行的几条命令和用途 npm uninstall -g grunt  删除掉全局grunt npm install -g grunt-cli 把grunt加入你的系统搜索路径中 npm init 自动创建一个基本的 package.json 文件 npm install <module> –save-dev  安装一个grunt插件,并在package.json文件中将它添加到devDependencies属性中(目前尚不清楚devDependencies和depe…

你需要检查js语法错误,然后再去压缩js代码.如果这两步你都去手动操作,会耗费很多成本.Grunt就能让你省去这些手动操作的成本. “—save-dev”的意思是,在当前目录安装grunt的同时,顺便把grunt保存为这个目录的开发依赖项.看到“开发依赖项”这一次,是不是觉得有些眼熟?上文在配置package.json时,其中的“devDependencies”中就会存储开发依赖项. 下面就是一些常有grunt开发依赖插件 Contrib-jshint——javascript语法错误检查:Con…

本文主要讲如何用Grunt打包AngularJS的模板HTML. 一 说明 AngularJS中使用单独HTML模板文件的地方非常多,例如:自定义指令.ng-include.templateUrl等.通常这些文件都是独立的html文件,AngularJS中使用这些文件都是通过文件路径地址引用的. 当用Grunt打包压缩整个项目时,如何处理这些html模板文件呢?本文讲的grunt-angular-templates插件可以解决该问题. grunt-angular-templates插件的基本原理…

本文主要讲如何使用Grunt实现less文件压缩. 一 说明 less是非常常用的样式框架之一,Grunt也提供了可以编译和打包less样式文件的插件:grunt-contrib-less. 实现原理分析: 分析该插件源码,可以发现该插件实际只做了对样式文件的各种处理,真正进行编译less文件到css文件,实际还是调用的less库的less.render方法实现的. 如下是grunt-contrib-less库源码: 二 安装 npm install grunt-contrib-less --s…

本文主要讲如何使用Grunt实现RequireJS文件压缩. 一 说明 ES6出来前,RequireJS是JavaScript模块化最常用的方式之一.对于使用RequireJS构建的项目,要实现打包压缩,需要使用grunt-contrib-requirejs插件. 二 安装 npm install grunt-contrib-requirejs --save-dev 三 加载任务 grunt.loadNpmTasks('grunt-contrib-requirejs'); 四 配置 在Grunt…

本文主要讲expand使用方法. 当你希望处理大量的单个文件时,这里有一些附加的属性可以用来动态的构建一个文件列表.这些属性都可以用于 Compact 和 Files Array 文件映射格式. expand 设置为true将启用下面的选项: cwd 所有src指定的匹配都将相对于此处指定的路径(但不包括此路径) . src 相对于cwd路径的匹配模式. dest 目标文件路径前缀. ext 对于生成的dest路径中所有实际存在文件,均使用这个属性值替换扩展名. extDot 用于指定标记扩展名…

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

本文主要讲配置任务中的filter,包括使用默认fs.Stats方法名和自定义过滤函数,以及filter的实现原理. 通过设置filter属性可以实现一些特殊处理逻辑.例如:要清理某个文件夹下的所有空文件夹,这时使用clean任务时,需要判断该文件夹下的哪些是文件,哪些是文件夹,只对空文件执行clean任务. 具体使用方法分为如下两种: 一 使用fs.Stats方法作为过滤函数 fs.stats是NodeJS的一个类,上边提供了很多对文件判断的方法,具体可以参考这里. 如下将filter设置为'…