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

安装 CLI

首先,需要先将Grunt命令行(CLI)安装到全局环境中。

npm install -g grunt-cli

上述命令执行完后,grunt 命令就被加入到你的系统路径中了,以后就可以在任何目录下执行此命令了。

Grunt CLI的任务很简单:调用与Gruntfile在同一目录中 Grunt。这样带来的好处是,允许你在同一个系统上同时安装多个版本的 Grunt。

CLI 是如何工作的

每次运行grunt 时,他就利用node提供的require()系统查找本地安装的 Grunt。正是由于这一机制,你可以在项目的任意子目录中运行grunt 。

如果找到一份本地安装的 Grunt,CLI就将其加载,并传递Gruntfile中的配置信息,然后执行你所指定的任务。

一般步骤

  1. 将命令行的当前目录转到项目的根目录下。
  2. 执行npm install命令安装项目依赖的库。
  3. 执行 grunt 命令。

准备工作

一般需要在你的项目中添加两份文件:package.json 和 Gruntfile

package.json: 此文件被npm用于存储项目的元数据,以便将此项目发布为npm模块。你可以在此文件中列出项目依赖的grunt和Grunt插件,放置于devDependencies配置段内。

{ "name": "my-project-name",

  "version": "0.1.0",

  "devDependencies": {

    "grunt": "~0.4.5",

    "grunt-contrib-jshint": "~0.10.0",

    "grunt-contrib-nodeunit": "~0.4.1",

    "grunt-contrib-uglify": "~0.5.0"

  }

}

Gruntfile: 此文件被命名为 Gruntfile.js 或 Gruntfile.coffee,用来配置或定义任务(task)并加载Grunt插件的。

安装Grunt 和 grunt插件

向已经存在的package.json 文件中添加Grunt和grunt插件的最简单方式是通过npm install <module> --save-dev命令。

例如:npm install grunt-contrib-jshint --save-dev

Gruntfile文件案例

文件合并:将src目录下的a.js,b.js,c.js合并dest目录的abc.js

module.exports = function (grunt) {
// 项目配置
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
options: {
separator: ';'
},
dist: {
src: ['src/a.js', 'src/b.js', 'src/c.js'],
dest: 'dest/abc.js'
}
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
// 默认任务
grunt.registerTask('default', ['concat']);
}

文件压缩:

module.exports = function (grunt) {
// 项目配置
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
options: {
banner: '/*! <%= pkg.file %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
preserveComments: 'all', //不删除注释,还可以为 false(删除全部注释),some(保留@preserve @license @cc_on等注释)
report: "min"//输出压缩率,可选的值有 false(不输出信息),gzip
//美化代码
beautify: {
//中文ascii化,非常有用!防止中文乱码的神配置
ascii_only: true
}
},
build: {
src: 'src/<%=pkg.file %>.js',
dest: 'dest/<%= pkg.file %>.min.js'
},
buildall1: {//任务三:按原文件结构压缩js文件夹内所有JS文件
files: [{
'dest/a.min.js': 'src/a.js',
'dest/b.min.js': 'src/b.js',
'dest/c.min.js': 'src/c.js',
}]
},
buildall2: {//任务三:按原文件结构压缩js文件夹内所有JS文件
files: [{
expand:true,
cwd:'src',//js目录下
src:'**/*.js',//所有js文件
dest: 'dest'//输出到此目录下
}]
},
release: {//任务四:合并压缩a.js和b.js
files: {
'dest/ab.min.js': ['dest/a.min.js', 'src/b.min.js']
}
}
}
});
// 加载提供"uglify"任务的插件
grunt.loadNpmTasks('grunt-contrib-uglify');
// 默认任务
grunt.registerTask('default', ['uglify']);

// 默认任务(指定执行顺序)
/* grunt.registerTask('default', ['uglify:release']);
grunt.registerTask('mina', ['uglify:builda']);
grunt.registerTask('minb', ['uglify:buildb']);
grunt.registerTask('minall', ['uglify:buildall']);*/

}

参考:http://www.gruntjs.net/getting-started

grunt自动化工具的更多相关文章

  1. Grunt自动化工具相关

    Grunt 项目中安装grunt模块npm install grunt --save,删除模块 npm uninstall grunt ,缺失某个插件:npm install grunt-contri ...

  2. grunt自动化构建工具

    一.什么是grunt? 是基于nodejs的项目构建工具,grunt和grunt插件是通过npm安装并管理的,npm是node.js的包管理器 二.为什么要用grunt? 自动化.对于反复重复的任务, ...

  3. Grunt自动化构建工具(网址:http://www.gruntjs.net/getting-started或者http://gruntjs.cn/getting-started)

    简介:Grunt是基于Node.js的项目构建工具,对于需要重复执行的任务,例如压缩.编译.单元测试等,自动化工具可以减少你的工作量,使你的工作更轻松. 一:检测nodejs是否安装好,打开CMD控制 ...

  4. NPM、nodeJS安装,grunt自动化构建工具学习总结

    一:安装 npm是随nodeJs安装包一起安装的包管理工具,能解决NodeJS代码部署上的很多问题: 常见的使用场景有以下几种: 允许用户从NPM服务器下载别人编写的第三方包到本地使用. 允许用户从N ...

  5. 应用Grunt自动化地优化你的项目前端

    在不久前我曾写了一篇 应用r.js来优化你的前端 的文章,为大家介绍了r.js这个实用工具,它可以很好地压缩.合并前端文件并打包整个项目.但是如果将r.js放到项目中,我们不得不顾及到一个问题——项目 ...

  6. 前端自动化工具gulp自动添加版本号

    之前,我介绍了学习安装并配置前端自动化工具Gulp,觉得gulp确实比grunt的配置简单很多,于是我决定再深入学习一下gulp,就去网上查了资料,发现gulp还可以自动添加版本号,这个功能就为我平时 ...

  7. 学习安装并配置前端自动化工具Gulp

    Gulp和所有Gulp插件都是基于nodeJs来运行的,因此在你的电脑上需要安装nodeJs,安装过程请移驾安装并配置前端自动化工具--grunt.安装完成后,通过运行cmd进入DOS命令窗口,如图: ...

  8. Node.js前端自动化工具:gulp

    前端自动化工具 -- gulp 使用简介 gulp是基于流的前端自动化构建工具. 之前也谈到了 grunt的用法,grunt其实就是配置+配置的形式. 而gulp呢,是基于stream流的形式,也就是 ...

  9. grunt 构建工具(build tool)初体验

    操作环境:win8 系统,建议使用 git bash (window下的命令行工具) 1,安装node.js 官网下载:https://nodejs.org/  直接点击install ,会根据你的操 ...

随机推荐

  1. Devexpress GridControl z

    http://minmin86121.blog.163.com/blog/static/4968115720144194923578/ 1 AllowNullInput=False; --Devexp ...

  2. HDU-4861 Couple doubi

    http://acm.hdu.edu.cn/showproblem.php?pid=4861 Couple doubi Time Limit: 2000/1000 MS (Java/Others)   ...

  3. Hadoop对文本文件的快速全局排序

    一.背景 Hadoop中实现了用于全局排序的InputSampler类和TotalOrderPartitioner类,调用示例是org.apache.hadoop.examples.Sort. 但是当 ...

  4. html 5 canvas 绘制太极demo

    一个练习canvas的小案例.其中若有小问题,欢迎大神拍砖……^_* 代码效果预览地址:http://code.w3ctech.com/detail/2500. <div class=" ...

  5. LeetCode题解——Integer to Roman

    题目: 将整数转换为罗马数字.罗马数字规则可以参考: 维基百科-罗马数字 解法: 类似于进制转换,从大的基数开始,求整数对基数的商和余,来进行转换. 代码: class Solution { publ ...

  6. 线性模型(2):Linear Regression

    此笔记源于台湾大学林轩田老师<机器学习基石><机器学习技法> 我们已经学习过PLA算法,所谓的线性模型就是:计算核心为.PLA是一种分类方法,这里介绍线性回归方法(与概率与统计 ...

  7. Kindle Paperwhite 2使用体验

    博客开通后一懒就扔下了几十天,着实自惭.鉴于是第一篇,先说点题外话. 一转眼读研的生活已经过去一年有余.曾经的同学已经在职场拼搏,同龄人的生活状态也自然地带给自己一份紧迫感:不敢再贪恋校园生活的安逸, ...

  8. java易混淆概念之类变量、成员变量、局部变量

      类变量.成员变量.局部变量 类变量(也叫静态变量)是类中独立于方法之外的变量,用static 修饰.(static表示“全局的”.“静态的”,用来修饰成员变量和成员方法,或静态代码块(静态代码块独 ...

  9. Windows7 32位下opencv与python2.66的环境配置

    刚接触Python和OpenCV,对两者都不太了解,因为今后学习会使用到这两种工具,特此学习配置.PS:本帖适用小白. 一. 需要的文件 1. OpenCV 可用OpenCV-2.3.1-win-su ...

  10. 30 分钟 Java Lambda 入门教程

    Lambda简介 Lambda作为函数式编程中的基础部分,在其他编程语言(例如:Scala)中早就广为使用,但在Java领域中发展较慢,直到java8,才开始支持Lambda. 抛开数学定义不看,直接 ...