前面我们已经知道了如何安装grunt,本章节给各位道友介绍如何使用 grunt 的插件,grunt是重点在于如何配置使用 Gruntfile.js,官网上也有很多范例。

 1,包装函数

module.exports=function(grunt){}

   我们的代码要包括在这个方法里。

 2,任务配置

// 包装函数
module.exports = function(grunt) { // 任务配置
grunt.initConfig({ })
}

在这里我们需要初始化参数,这是grunt的最主要的部分

 3,导入包文件

// 包装函数
module.exports = function(grunt) { // 任务配置
grunt.initConfig({
pkg:grunt.file.readJSON('package.json')
})
}

  使用 grunt.file.readJSON('package.json') 可以把外部的package.json文件引入到 gruntfile.js,并生成一个JSON格式的对象可以访问 package.json里的数据,我们如果使用 grunt.file.readYAML() 生成 YAML格式的对象。

4,配置任务

// 任务配置
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
 concat: { // concat 任务的配置 },
uglify: { // uglify 任务的配置 }, my_property: 'whatever', my_src_files: ['foo/*.js', 'bar/*.js']// 其他与任务无关的属性
 })

  任务配置定义在 Gruntfile 和 grunt.intiConfig()方法中,配置主要是以任务命名的属性,也可以包含其他属性,但是不能与任务所需要的属性重合

5,任务和目标

  当任务运行的时候(下面介绍的加载任务之后),Grunt会从同名的属性中查找配置(即从initConfig)。多重任务可以有多个配置,每个任务使用任意命名的目标定义。

grunt.initConfig({
concat: {
foo: {
// concat 任务的目标 "foo"
},
bar: {
// concat 任务的目标 "bar"
},
},
uglify: {
bar: {
// uglify 任务的目标 "bar"
},
},
});

  运行 grunt concat:foo 或 grunt concat:bar 只会处理指定的目标配置,而运行 grunt concat都会运行

6,任务加载

  一些任务,比如合并,压缩和校验等都可以作为 grunt插件。只要插件被指定 package.json中,并且通过 npm install 安装好,就可以在 gruntfile中加载:

  

  

AngularJs——grunt神器的使用的更多相关文章

  1. AngularJS——grunt神器的安装

    前言: 刚开始学 angularJS,在慕课网上看的大漠老师的视频(http://www.imooc.com/learn/156),里面刚开始讲述了前端开发-调试-测试所使用的手段和工具,本人对前端开 ...

  2. [Whole Web] [AngularJS + Grunt] Using ng-html2js to Convert Templates into JavaScript

    ng-html2js takes .html templates and converts them into strings stored in AngularJS's template cache ...

  3. AngularJS表格神器“ui-grid”的应用

    HTML:  (代码仅用于解释得更清楚,并未完全展示) <!doctype html> <html ng-app="app"> <head> & ...

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

    最近作运维工作 docker 接触到一个开源webui dockerui 原项目地址 https://github.com/crosbymichael/dockerui 用angular框架实现,项目 ...

  5. 【前端自动化】Gulp的使用(一):安装gulp

    作为一个.NET码农,在前端高速发展的时代,深深感觉自己那么点“前端”技术不够看,比如开发出来的js css等文件庞大,不便于管理,还记得以前的开发就是累加 html  css   jquery, 现 ...

  6. 使用Yeoman,Grunt和Bower开发AngularJS(译)

    使用Yeoman产生AngularJS的主要骨架 使用Grunt加速开发和帮助执行 使用Bower来加入第三方插件和框架——third party plugins/frameworks 一.准备工作 ...

  7. [Grunt + AngularJS] Using ng-annotate for min-safe AngularJS

    When you minify your code with a tool like Uglify, the resulting minified file will rename variables ...

  8. Angularjs Nodejs Grunt 一个样例

    做了一个简单的演示样例,目的是记录环境配置以及这套框架的结构流程. 1.配置环境 默认nodejs已安装. 安装下面模块:express(nodejs框架),grunt(javascript task ...

  9. AngularJS介绍

    AngularJS介绍–AngularJS的前世今生 AngularJS是什么 在Web开发领域,我们一般使用HTML作为前端页面元素的声明式语言,使用CSS技术作为展示样式的描述语言,JavaScr ...

随机推荐

  1. iOS开发-简单解析JSON数据

    什么是JSON   JSON是一种轻量级的数据格式,一般用于数据交互 服务器返回给客户端的数据,一般都是JSON格式或者XML格式(文件下载除外) JSON的格式很像OC中的字典和数组   {“nam ...

  2. python实现插入排序

    代码如下@.·.@ # *-* coding: utf- *-* if __name__ == '__main__': def insert_sort(l): ,len(l)): tmp = l[i] ...

  3. 这一路走来,冷暖自知 (附算法demos)

    最近半年多,除了“一键修图”算法之外我还做了其他什么算法? 1.实时单图HDR算法(颜色矫正,智能曝光) 2.多图曝光融合HDR算法(最高支持八百万像素左右) 3.模拟热能探测算法 4.防伪探测算法 ...

  4. Unity开发 资源准备

    开发环境准备 插件资源 当有喜欢的资源,选择去泽国社区和纳金网下载,仅用于学习目的. Fbx查看器 下载版本对应的FBX插件 比如:fbx20133_quicktime_win.exe 对应Quick ...

  5. Cookie测试工具小汇

    现在很多网站都用到Cookies,特别是用户的登陆以及购物网站的购物车. Cookies 通常用来存储用户信息和用户在某应用系统的操作,当一个用户使用Cookies 访问了某一个应用系统时,Web 服 ...

  6. IO流的练习4 —— 键盘录入学生成绩信息,进行排序后存入文本中

    需求: 键盘录入5个学生信息(姓名,语文成绩,数学成绩,英语成绩),按照总分从高到低存入文本文件 分析: A:创建学生类 B:创建集合对象 TreeSet<Student> C:键盘录入学 ...

  7. TP第一天路由解析

    路由解析:支持四种URL模式,分别是普通模式.路径模式.重写模式.兼容模式,分别用0123表示 普通模式:http://网址/index.php?m=model&c=user&a=lo ...

  8. 【C#】【MySQL】C# 查询数据库语句@Row:=@Row+1

    如何实现数据库查询产生虚拟的一列序号的功能: ) )AS r; 该语句可以实现产生虚拟的一列数据在MySQL中运行没有问题. 但是在C#里面调用去出现了错误"Parameter '@ROW' ...

  9. C# 通过消息捕获处理窗体最大化/最小化

    通过以下的一些代码可以实现捕获相关的一些消息事件; 以及可以通过调用 SetCloseMenu();实现关闭一些按钮功能如屏蔽关闭按钮功能等; 需要添加命名空间:using System.Runtim ...

  10. Linux Linux程序练习五

    题目:编写两个进程a和b,利用共享内存技术,a向共享内存写字符串,b将从共享内存中读到的字符串在屏幕上打印出来. //创建共享内存区 #include <stdio.h> #include ...