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. IOS 疑问记录

    1. NSThread  中的  NSRunLoop 2. NSThread  中的 performSelector:onThread:withObject:waitUntilDone:

  2. IOS PUSH 实践操作~~~~

    1.推送过程简介        (1)App启动过程中,使用UIApplication::registerForRemoteNotificationTypes函数与苹果的APNS服务器通信,发出注册远 ...

  3. U盘安装Centos5.3

    一.制作 U 盘启动引导盘 1. 插上 U 盘,打开 UltraISO 软件,打开CentOS-5.3-i386-bin-DVD.iso 文件: 2.点启动--写入硬盘镜像,在硬盘驱动器里面选择你的 ...

  4. canvas 模拟小球上抛运动的物理效果

    最近一直想用学的canvas做一个漂亮的小应用,但是,发现事情并不是想的那么简单.比如,游戏的逼真效果,需要自己来coding…… 所以,自己又先做了一个小demo,算是体验一下亲手打造物理引擎的感觉 ...

  5. Java学习笔记(3)

    “当你定义出一组类的父型时,你可以用子型的任何类来填补任何需要或期待父型的位置” “运用多态时,引用类型可以是实际对象类型的父类”Animal myDog = new Dog(); 三种方法可以防止某 ...

  6. Java-note-字符串连接

    String a="100"; int b=2; String c=a+b; then the answer is c=1002; + make the two sides bec ...

  7. AS3 条件编译

    转:http://www.lite3.cn/blog/?p=404&cpage=1 知道C/C++ 有条件编译,一直想着AS要是也有条件编译就好了,今天搜了半天Google,终于让我找到了 下 ...

  8. jQuery-validate error messages in Twitter ...

    http://www.jefclaes.be/2012/11/jquery-validate-error-messages-in.html something satisfactory. In thi ...

  9. 北京Uber优步司机奖励政策(3月5日)

    滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...

  10. oracle中in与exists的区别

    exists是用来判断是否存在的,当exists中的查询存在结果时则返回真,否则返回假.not exists则相反. exists做为where 条件时,是先对where 前的主查询询进行查询,然后用 ...