初探grunt

最新推荐文章于 2024-11-15 17:52:45 发布

weixin_30878501

最新推荐文章于 2024-11-15 17:52:45 发布

阅读量91

点赞数

文章标签： json javascript 测试 ViewUI

原文链接：http://www.cnblogs.com/jning/p/3831083.html

版权

今天开始正式学习grunt

参考博文：http://blog.fens.me/nodejs-grunt-intro/

1、关于grunt

Grunt是一个自动化的项目构建工具. 如果你需要重复的执行像压缩, 编译, 单元测试, 代码检查以及打包发布的任务. 那么你可以使用Grunt来处理这些任务, 你所需要做的只是配置好Grunt, 这样能很大程度的简化你的工作.

如果在团队中使用Grunt, 你只需要与其他人员约定好使用Grunt应该规避的问题, 就能够很方便的自动化的处理大部分的常见工作任务, 你所付出的努力几乎为0.

2、安装grunt

Grunt和Grunt插件都是通过npm, Node.js包管理器安装和管理的.

Grunt 0.4.x要求Node.js的版本>=0.8.0(也就是0.8.0及以上版本的Node.js才能很好的运行Grunt)。

我的系统环境

C:\Users\Administrator>node -v
v0.10.29

C:\Users\Administrator>npm -v
1.4.14

系统中已经安装好nodejs和npm，具体安装方法参考：http://www.jb51.net/article/33086.htm

和安装时"express不是内部命令"的解决方法：http://jingyan.baidu.com/article/922554468a3466851648f419.html

安装grunt-cli

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

npm install -g grunt-cli

这条命令将会把grunt命令植入到你的系统路径中，这样就允许你从任意目录来运行它(定位到任意目录运行grunt命令)。

grunt-cli并不grunt，grunt-cli的作用是管理本地各版本的grunt，让命令行可以直接执行grunt命令。

注意，安装grunt-cli并不等于安装了grunt任务运行器！Grunt CLI的工作很简单：在Gruntfile所在目录调用运行已经安装好的相应版本的Grunt。这就意味着可以在同一台机器上同时安装多个版本的Grunt。

下面全局安装grunt-cli(-g)

C:\Users\Administrator>npm install -g grunt-cli
C:\Users\Administrator\AppData\Roaming\npm\grunt -> C:\Users\Administrator\AppDa
ta\Roaming\npm\node_modules\grunt-cli\bin\grunt
grunt-cli@0.1.13 C:\Users\Administrator\AppData\Roaming\npm\node_modules\grunt-c
li
├── resolve@0.3.1
├── nopt@1.0.10 (abbrev@1.0.5)
└── findup-sync@0.1.3 (lodash@2.4.1, glob@3.2.11)

CLI如何工作

每次运行grunt时，它都会使用node的require()系统查找本地已安装好的grunt。正因为如此，你可以从你项目的任意子目录运行grunt。

如果找到本地已经安装好的Grunt，CLI就会加载这个本地安装好的Grunt库，然后应用你项目中的Gruntfile中的配置(这个文件用于配置项目中使用的任务，Grunt也正是根据这个文件中的配置来处理相应的任务)，并执行你所指定的所有任务。

安装grunt

接下来安装全局grunt（不要在意盘符）

E:\nodejs>npm install -g grunt
grunt@0.4.5 C:\Users\Administrator\AppData\Roaming\npm\node_modules\grunt
├── dateformat@1.0.2-1.2.3
├── which@1.0.5
├── eventemitter2@0.4.14
├── getobject@0.1.0
├── colors@0.6.2
├── rimraf@2.2.8
├── async@0.1.22
├── hooker@0.2.3
├── grunt-legacy-util@0.2.0
├── exit@0.1.2
├── lodash@0.9.2
├── coffee-script@1.3.3
├── underscore.string@2.2.1
├── iconv-lite@0.2.11
├── grunt-legacy-log@0.1.1 (underscore.string@2.3.3, lodash@2.4.1)
├── glob@3.1.21 (inherits@1.0.0, graceful-fs@1.2.3)
├── nopt@1.0.10 (abbrev@1.0.5)
├── js-yaml@2.0.5 (esprima@1.0.4, argparse@0.1.15)
├── minimatch@0.2.14 (sigmund@1.0.0, lru-cache@2.5.0)
└── findup-sync@0.1.3 (lodash@2.4.1, glob@3.2.11)

E:\nodejs>grunt
grunt-cli: The grunt command line interface. (v0.1.13)

Fatal error: Unable to find local grunt.

If you're seeing this message, either a Gruntfile wasn't found or grunt
hasn't been installed locally to your project. For more information about
installing and configuring grunt, please see the Getting Started guide:

http://gruntjs.com/getting-started

执行grunt命令，我们发现系统报错了，提示不能加载本地库。因为，grunt命令执行，是需要当前目录中包括package.json和Gruntfile.js两个文件。

package.json，是npm项目配置文件
Gruntfile.js，是专门用来配置grunt的配置文件

接下来我就创建一个helloworld的项目

E:\nodejs>express -e hello

在上述目录(package.json所在目录)中运行npm install将依据package.json文件中所列出的每个依赖来自动安装适当版本的依赖。

这里有一些为项目创建package.json文件的方式：

大多数的grunt-init模板都会自动创建一个项目特定的package.json文件。
npm init命令会自动创建一个基本的package.json文件。

E:\nodejs\hello>npm install

添加Grunt和Grunt插件到一个现有的package.json中最简单的方式就是使用npm install <module> --save-dev命令。这不仅会在本地安装<module>，它还会使用一个波浪形字符的版本范围自动将所安装的<module>添加到项目依赖中。

安装-save-dev就可以了，直接把grunt作为devDependencies写入的package.json中。

E:\nodejs\hello>npm install grunt --save-dev

{
  "name": "hello",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "express": "~4.2.0",
    "static-favicon": "~1.0.0",
    "morgan": "~1.0.0",
    "cookie-parser": "~1.0.1",
    "body-parser": "~1.0.0",
    "debug": "~0.7.4",
    "ejs": "~0.8.5"
  },
  "devDependencies": {
    "grunt": "^0.4.5"
  }
}

上述命令也可以用于Grunt插件和其他的node模块的安装。当完成操作后请确保更新后的package.json文件也要与你的项目一起提交。

然后，我们再执行grunt，系统提示缺少Gruntfile文件

E:\nodejs\hello>grunt
A valid Gruntfile could not be found. Please see the getting started guide for
more information on how to configure grunt: http://gruntjs.com/getting-started
Fatal error: Unable to find Gruntfile.

在原目录下创建gruntfile.js文件

module.exports = function(grunt) {
  // Project configuration.
  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'
      }
    }
  });
  // Load the plugin that provides the "uglify" task.
  grunt.loadNpmTasks('grunt-contrib-uglify');
  // Default task(s).
  grunt.registerTask('default', ['uglify']);
};

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

"wrapper"函数(包装函数)
项目和任务配置
加载的Grunt插件和任务
自定义任务

在上面的Gruntfile中，项目的元数据会从项目的package.json文件中导入到grunt配置中，同时grunt-contrib-uglify插件的uglify任务被配置用于压缩一个源文件，同时使用该元数据(导入的元数据)动态的生成一个标语(banner)注释。在命令行运行grunt时默认会运行uglify任务。

再次运行grunt，这时提示是grunt-contrib-uglify包找不到，是Gruntfile.js配置文件中的错误了。

E:\nodejs\hello>grunt
>> Local Npm module "grunt-contrib-uglify" not found. Is it installed?
Warning: Task "uglify" not found. Use --force to continue.

Aborted due to warnings.

因为package.json上没有这个依赖库，所以要编辑一下package.json

{
  "name": "hello",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "express": "~4.2.0",
    "static-favicon": "~1.0.0",
    "morgan": "~1.0.0",
    "cookie-parser": "~1.0.1",
    "body-parser": "~1.0.0",
    "debug": "~0.7.4",
    "ejs": "~0.8.5"
  },
  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-contrib-uglify": "~0.2.4"
  }
}

注意，这里使用的grunt-contrib-uglify版本是0.2.4

编辑完后就npm它一下

E:\nodejs\hello>npm install

根据这段代码，我们需要建立src和build文件夹

build: {
        src: 'src/<%= pkg.name %>.js',
        dest: 'build/<%= pkg.name %>.min.js'
      }

在src里建立一个简单的js文件，注意文件名要和根目录名相同

var hello = function(name){
    return 'Hello ' + name;
}

再来执行grunt

E:\nodejs\hello>grunt
Running "uglify:build" (uglify) task
File "build/hello.min.js" created.

Done, without errors.

grunt运行正常，并且执行了uglify:build的任务。打开build/nodejs-grunt.min.js文件

/*! hello 2014-07-08 */
var hello=function(a){return"Hello "+a};

我们可以看到一个新生成的压缩文件nodejs-grunt.min.js。

上面的例子，是一个js文件压缩的例子。

先写到这，继续熟悉咯~

转载于:https://www.cnblogs.com/jning/p/3831083.html