Grunt的配置和使用(一)

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插件(相应版本的插件)。使用命令

l

安装依赖模块。

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

package.json

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

  1. n

    文件。

  2. n

    文件。

  3. 新建一个文件,重命名为

    n

一个

n

文件示例:

{
    "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

e

文件都是归属于项目根目录中的一个有效的 JavaScript 或者 CoffeeScript 文件。
一个 Gruntfile 由下面几部分组成:
* “wrapper” 函数,一个包装函数
* 项目和任务配置
* 加载的 Grunt 插件和任务
* 自定义任务

wrapper 函数

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

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

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

g

方法。

// 项目配置
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-contrib-uglify 插件的

s

,然后存储到 dest 目录中。
插件一般都托管在 github 上,其使用方法都会有说明。比如 grunt-contrib-uglify

加载 grunt 插件和任务

只要一个插件被作为一个依赖指定在项目的

e

文件中使用下面的简单命令启用.

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

tips: 使用

p

命令可以列出所有可用的任务

同时,你可以通过定义一个

t

任务来配置 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的配置和使用(一)

时间: 2024-08-17 20:44:43

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

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

Grunt这货是啥? Grunt 是一个基于任务的 JavaScript 项目命令行构建工具. 最近很火的前端自动化小工具,基于任务的命令行构建工具 http://gruntjs.com Grunt能帮我们干啥? 在开始介绍前,先向大家描述下面的场景: [场景1:项目开始前] 先建立一个 projA 的文件夹 再建 html css js images (建5个或以上文件夹,花费1分钟) 拷贝 CSS库(Yui Reset bootstrap)JS库(Requiet.js Seajs jQuer

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

Grunt的配置及使用(压缩合并js/css) 安装 前提是你已经安装了nodejs和npm. 你能够在 nodejs.org 下载安装包安装.也能够通过包管理器(比方在 Mac 上用 homebrew,同一时候推荐在 Mac 上用 homebrew). 安装grunt CLI npm install -g grunt-cli 依照官方的说法.grunt-cli仅仅是为了在同一台机器上安装不同的grunt版本号,那么咱们先不去管他. 在项目中使用grunt 首先须要往项目里加入两个文件:pack

grunt基础配置

grunt基础配置 要使用grunt来管理项目,一般需要如下的几个步骤: 安装grunt命令行工具grunt-cli 在项目中安装grunt 安装grunt插件 建立并配置Gruntfile.js 安装grunt命令行工具 npm install -g grunt-cli 在项目中安装grunt npm install grunt --save-dev 安装完成后,可以在package.json文件中看到devDependencies中加入了grunt包 "devDependencies&quo

grunt安装配置

1.安装nodeJs环境(包含npm) 2.$ npm install -g grunt-cli //可调用与Gruntfile在同一目录中的Grunt版本 3-1.$ npm install -g grunt-init 大部分 grunt-init 模版都会自动创建特定于项目的package.json文件 3-2.$ npm init //命令会创建一个基本的package.json文件,一步步设置回车. C:\Users\***\AppData\Roaming\npm\node_module

剖析Grunt任务配置

之前博客中大致描述过"前端自动化构建工具Grunt"及"grunt[mismatched:define]"等信息.然而,并没有深入:下述内容,将深入剖析Grunt Files处理方式.配置项.自定义插件. 一.准备工作 A. 通过npm init在项目根目录下生成package.json: B. 通过npm install grunt --save-dev 安装grunt依赖; C. 项目根目录下手动创建文件夹Gruntfile.js Gruntfile由以下几部分

grunt第一次配置

package.json 1 { 2 "name": "fortest", 3 "title": "ForTest1", 4 "description": "Library for composing asynchronous and event-based operations in JavaScript", 5 "repository": { 6 "ty

git + grunt 环境配置

  1??ssh key生成步骤 一.设置Git的user.name和user.email: $ git config --global user.name "xiongzuyan" $ git config --global user.email [email protected] 二.生成SSH密钥: 1.查看是否已经有了ssh密钥:cd ~/.ssh 如果没有密钥则不会有此文件夹,有则备份删除 2.生成密钥:$ ssh-keygen -t rsa -C "[email 

grunt使用使用插件uglify配置详解

grunt-contrib-uglify uglify是一个文件压缩插件,项目地址:https://github.com/gruntjs/grunt-contrib-uglify 本文将以一个DEMO来展示如何使用uglify插件. DEMO环境 package.json: { "name": "grunt-demo", "version": "0.1.0", "devDependencies": { &q

grunt配置太复杂?发布一个前端构建工具,简单高效,自动跳过未更新的文件

做前端项目,如果没有一个自动化构建工具,手动处理那简直就是坑爹O(∩_∩)O.于是上网了解了下,grunt用的人不少,功能也挺强大.看了一下grunt的配置(包括gulp),感觉稍显复杂.当时项目结构非常简单,就是单文件夹下的html文件,再加上js.css.图片.需要的功能也就js的合并和压缩,html和css的简单格式化,功能简单,So easy……开搞,搞定第一版,一直用到今年.最近整理项目,感觉只支持单一文件夹,功能全内置,实在不够灵活,于是重写了第二版.功能实现没什么难的,麻烦的是打造