Grunt的配置和使用(一)

Grunt 和 Grunt 的插件都是通过 Node.js 的包管理器 npm 来安装和管理的。为了方便使用 Grunt ,你应该在全局范围内安装 Grunt 的命令行接口(CLI)。要做到这一点,你可能需要使用 sudo (OS X,*nix,BSD 等平台中)权限或者作为超级管理员( Windows 平台)来运行 shell 命令。

npm install -g grunt-cli

使用全局安装之后,可以在任何一个目录中运行 grunt 命令。

如何工作

每次运行 grunt 时,它都会使用 node 的 require() 系统查找本地已安装好的 grunt。在本地装好 Grunt 之后,运行 gurnt 命令时,CLI 就会加载这个本地安装好的 Grunt 库,然后应用你项目中的 Gruntfile 中的配置(这个文件用于配置项目中使用的任务),并执行你所指定的所有任务。而 Grunt 库的安装则依赖 package.json 文件。

假设已经安装好 Grunt CLI 并且项目也已经使用一个 package.json 和一个 Gruntfile 文件配置好了,那么接下来用 Grunt 进行工作就非常容易了:

  1. 进入到项目的根目录(在命令行面板定位到项目根目录。在 windows 系统下,也可以进入项目根目录的文件夹后,按Shift+鼠标右键,打开右键菜单,选择“在此处打开命令窗口(W)”)。
  2. 运行 npm install 安装项目相关依赖(插件,Grunt 内置任务等依赖)。
  3. 使用 grunt (命令)运行 Grunt。

构建一个新的 Grunt 项目

最简单的配置需要两个文件:package.jsonGruntfile

package.json:这个文件被用来存储已经作为 npm 模块发布的项目元数据(也就是依赖模块)。你将在这个文件中列出你的项目所依赖的Grunt(通常我们在这里配置Grunt版本)和Grunt插件(相应版本的插件)。使用命令 npm install 安装依赖模块。

Gruntfile:通常这个文件被命名为Gruntfile.js或者Gruntfile.coffee,它用于配置或者定义Grunt任务和加载Grunt插件。

package.json

package.jsonGruntfile 相邻,都归属在项目的根目录中。在目录中运行 npm install 安装需要的依赖模块。其创建方式有几种:

  1. grunt-init 命令创建 Grunt 模板时,会自动为项目创建一个 package.json 文件。
  2. npm init 会自动创建一个基本的 package.json 文件。
  3. 新建一个文件,重命名为 package.json

一个 package.json 文件示例:

{
"name": "my-project-name", // 项目名称
"version": "0.1.0", // 项目版本
"devDependencies": { // 项目依赖
"grunt": "~0.4.1", // Grunt库
"grunt-contrib-jshint": "~0.6.0", //grunt中的工具
"grunt-contrib-nodeunit": "~0.2.0", //grunt中的工具
"grunt-contrib-uglify": "~0.2.2" //grunt中的工具,可以按照这种方式在 dependencies 中添加自己想要的工具
}
}

Gruntfile

Gruntfile.jsGruntfile.coffee 文件都是归属于项目根目录中的一个有效的 JavaScript 或者 CoffeeScript 文件。

一个 Gruntfile 由下面几部分组成:

  • “wrapper” 函数,一个包装函数
  • 项目和任务配置
  • 加载的 Grunt 插件和任务
  • 自定义任务
wrapper 函数

每个 Gruntfile 都使用这个基本格式,同时所有的 Grunt 戴玛都必须指点在这个函数里面:

module.exports=function(){
//在这里添加 Grunt 相关
}
项目和任务配置

通常 Grunt 任务所依赖的配置素据都被定义在一个对象中,而这个对象将会被传递给 grunt.initConfig 方法。

// 项目配置
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
build: {
src: 'src/<%=pkg.name %>.js',
dest: 'build/<%= pkg.name %>.min.js'
}
}
});

在上面的代码中,grunt.file.readJSON('package.json') 会把存储在 package.json 中的 JSON 元数据导入到 Grunt 配置中。由于 <% %> 模板字符串可以引用任意的配置属性,因此可以通过这种方式来制定诸如文件路径文件列表类型的配置数据

与大多数的任务一样, grunt-contrib-uglify 插件的 uglify 任务要求他的配置被指定在一个同名属性中。在这个例子中,我们指定了一个 banner 选项,用于在文件顶部生成一个注释。紧接着是一个名为 build 的 uglify 目标,用于将一个js文件压缩为一个目标文件,比如:将 src 目录中的 jQuery-1.9.0.js 压缩成 jQuery-1.9.0.min.js,然后存储到 dest 目录中。

插件一般都托管在 github 上,其使用方法都会有说明。比如 grunt-contrib-uglify

加载 grunt 插件和任务

只要一个插件被作为一个依赖指定在项目的 package.json 文件中,并且通过 npm install 安装好,都可以在 Gruntfile 文件中使用下面的简单命令启用.

//加载提供 "uglify" 任务的插件
grunt.loadNpmTasks("grunt-contrib-uglify");

tips: 使用 grunt --help 命令可以列出所有可用的任务

同时,你可以通过定义一个 default 任务来配置 Grunt,让他默认运行一个过着多个任务。

// 默认任务
grunt.registerTask('default', ['uglify']);

可以将你允许默认运行的任务名称以数组的形式作为参数传递。

如果你想要的任务没有对应的 Grunt 插件提供相应的功能,你可以在 Gruntfile 内定义自定义的任务:

module.exports=function(){
//一个很基础的default任务
grunt.registerTask("default","load some stuff.",function(){
grunt.log.write("Loggin some stuff……").ok();
});
};

自定义的项目特定的任务可以不定义在 Gruntfile 中;它们可以定义在一个外部 .js 文件中,然后通过 grunt.loadTasks 方法来加载。

参考自:Grunt新手教程

Grunt的配置和使用(一)的更多相关文章

  1. Grunt安装配置教程:前端自动化工作流

    Grunt这货是啥? Grunt 是一个基于任务的 JavaScript 项目命令行构建工具. 最近很火的前端自动化小工具,基于任务的命令行构建工具 http://gruntjs.com Grunt能 ...

  2. 分享Grunt.js配置: watch + liveReload 实时监测文件变化自动刷新浏览器

    http://www.tuicool.com/articles/2eaQJn 用Grunt配置watch和liveReload组件,可以实时检测指定的文件变化并自动刷新浏览器.目前基本已经成为了我的必 ...

  3. grunt基础配置

    grunt基础配置 要使用grunt来管理项目,一般需要如下的几个步骤: 安装grunt命令行工具grunt-cli 在项目中安装grunt 安装grunt插件 建立并配置Gruntfile.js 安 ...

  4. Grunt的配置和使用

    Grunt和Grunt插件是通过NodeJs的包管理工具npm安装并进行管理的. Grunt 0.4.x必须配合NodeJs=>0.8.0版本使用(奇数版本的NodeJs不是稳定的开发版本)   ...

  5. Grunt的配置及使用(压缩合并js/css)

    Grunt的配置及使用(压缩合并js/css) 安装 前提是你已经安装了nodejs和npm. 你能够在 nodejs.org 下载安装包安装.也能够通过包管理器(比方在 Mac 上用 homebre ...

  6. grunt项目配置

    安装完CLI,还要在项目安装Grunt npm install -g grunt-cli npm install grunt --save-dev 源码放在src下 package.json放在根目录 ...

  7. git + grunt 环境配置

        1⃣️ssh key生成步骤 一.设置Git的user.name和user.email: $ git config --global user.name "xiongzuyan&qu ...

  8. grunt 检测js配置

    module.exports = function(grunt) { // 项目配置 grunt.initConfig({ pkg: grunt.file.readJSON('package.json ...

  9. grunt 一个目录下所有的js文件压缩 配置收藏

    module.exports = function(grunt){ // 项目配置 grunt.initConfig({ pkg: grunt.file.readJSON('package.json' ...

随机推荐

  1. 微信公众号菜单openid 点击菜单即可打开并登录微站

    现在大部分微站都通过用户的微信openid来实现自动登录.在我之前的开发中,用户通过点击一个菜单,公众号返回一个图文,用户点击这个图文才可以自动登录微站.但是如果你拥有高级接口,就可以实现点击菜单,打 ...

  2. mac下通过xcodebuild使用oclint

    step1 :下载oclint并安装 下载地址: http://oclint.org/downloads.html 选择mac os x或者darwin的包,下载到本地. 文件夹类似以下: oclin ...

  3. 安卓activity捕获返回button关闭应用的方法

    安卓activity捕获返回button关闭应用的方法 @Override public boolean onKeyDown(int keyCode, KeyEvent event) { //按下键盘 ...

  4. zoj 1025Wooden Sticks(贪心)

    递增子序列的最小组数.可以直接贪心,扫一遍 #include<iostream> #include<cstring> #include<cstdio> #inclu ...

  5. 关于cell中添加子视图 复用重叠问题的解决方法

    问题本质:   因为你要添加的子视图并不是在自定义的cell中实现的,而是根据系统给的UITableViewCell这个类创建的实例,每次进图 cellForRow方法都会创建一个cell,每次都要创 ...

  6. Sql Server之数据库规范——1、自动化规范命名

    一.废话: 随着数据库的规模越来越大,数据库的表也有成百上千,如果需要对数据库表名及字段名做操作,单个还好,直接一条语句搞定了,但如果要对整个库的所有表和字段名做操作,那就显得有点麻烦了.因此,我们需 ...

  7. openwrt看IP流量

    可以利用iptable来实现的,看附件的脚本. 把他放到路由器里面,然后运行. #!/bin/sh echo "Collecting data..." echo "&qu ...

  8. 原生js封装table表格操作,获取任意行列td,任意单行单列方法

    V1.001更新增加findTable-min.js 本次更新,优化了代码性能方面,增加了部分新功能,可以获取多个table表格批量操作. 考虑到本人后面的项目中可能涉及到大量的表格操作,提前先封了 ...

  9. STL模板_容器概念

    一.STL(Standard Template Library,标准模板库)概述1.容器:基于泛型的数据结构.2.算法:基于泛型的常用算法.3.迭代器:以泛型的方式访问容器中的元素,是泛型的算法可以应 ...

  10. C++_基础_继承、多态

    内容: (1)子类中的拷贝构造和拷贝赋值 (2)多继承和虚继承 (3)多态的初识 (4)虚析构的特性和使用 (5)多态的底层实现 (6)纯虚函数.抽象类的概念 1.子类中的拷贝构造和拷贝赋值 子类中的 ...