grunt自动化工具
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
中的配置信息,然后执行你所指定的任务。
一般步骤
- 将命令行的当前目录转到项目的根目录下。
- 执行
npm install
命令安装项目依赖的库。 - 执行
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自动化工具的更多相关文章
- Grunt自动化工具相关
Grunt 项目中安装grunt模块npm install grunt --save,删除模块 npm uninstall grunt ,缺失某个插件:npm install grunt-contri ...
- grunt自动化构建工具
一.什么是grunt? 是基于nodejs的项目构建工具,grunt和grunt插件是通过npm安装并管理的,npm是node.js的包管理器 二.为什么要用grunt? 自动化.对于反复重复的任务, ...
- Grunt自动化构建工具(网址:http://www.gruntjs.net/getting-started或者http://gruntjs.cn/getting-started)
简介:Grunt是基于Node.js的项目构建工具,对于需要重复执行的任务,例如压缩.编译.单元测试等,自动化工具可以减少你的工作量,使你的工作更轻松. 一:检测nodejs是否安装好,打开CMD控制 ...
- NPM、nodeJS安装,grunt自动化构建工具学习总结
一:安装 npm是随nodeJs安装包一起安装的包管理工具,能解决NodeJS代码部署上的很多问题: 常见的使用场景有以下几种: 允许用户从NPM服务器下载别人编写的第三方包到本地使用. 允许用户从N ...
- 应用Grunt自动化地优化你的项目前端
在不久前我曾写了一篇 应用r.js来优化你的前端 的文章,为大家介绍了r.js这个实用工具,它可以很好地压缩.合并前端文件并打包整个项目.但是如果将r.js放到项目中,我们不得不顾及到一个问题——项目 ...
- 前端自动化工具gulp自动添加版本号
之前,我介绍了学习安装并配置前端自动化工具Gulp,觉得gulp确实比grunt的配置简单很多,于是我决定再深入学习一下gulp,就去网上查了资料,发现gulp还可以自动添加版本号,这个功能就为我平时 ...
- 学习安装并配置前端自动化工具Gulp
Gulp和所有Gulp插件都是基于nodeJs来运行的,因此在你的电脑上需要安装nodeJs,安装过程请移驾安装并配置前端自动化工具--grunt.安装完成后,通过运行cmd进入DOS命令窗口,如图: ...
- Node.js前端自动化工具:gulp
前端自动化工具 -- gulp 使用简介 gulp是基于流的前端自动化构建工具. 之前也谈到了 grunt的用法,grunt其实就是配置+配置的形式. 而gulp呢,是基于stream流的形式,也就是 ...
- grunt 构建工具(build tool)初体验
操作环境:win8 系统,建议使用 git bash (window下的命令行工具) 1,安装node.js 官网下载:https://nodejs.org/ 直接点击install ,会根据你的操 ...
随机推荐
- Devexpress GridControl z
http://minmin86121.blog.163.com/blog/static/4968115720144194923578/ 1 AllowNullInput=False; --Devexp ...
- HDU-4861 Couple doubi
http://acm.hdu.edu.cn/showproblem.php?pid=4861 Couple doubi Time Limit: 2000/1000 MS (Java/Others) ...
- Hadoop对文本文件的快速全局排序
一.背景 Hadoop中实现了用于全局排序的InputSampler类和TotalOrderPartitioner类,调用示例是org.apache.hadoop.examples.Sort. 但是当 ...
- html 5 canvas 绘制太极demo
一个练习canvas的小案例.其中若有小问题,欢迎大神拍砖……^_* 代码效果预览地址:http://code.w3ctech.com/detail/2500. <div class=" ...
- LeetCode题解——Integer to Roman
题目: 将整数转换为罗马数字.罗马数字规则可以参考: 维基百科-罗马数字 解法: 类似于进制转换,从大的基数开始,求整数对基数的商和余,来进行转换. 代码: class Solution { publ ...
- 线性模型(2):Linear Regression
此笔记源于台湾大学林轩田老师<机器学习基石><机器学习技法> 我们已经学习过PLA算法,所谓的线性模型就是:计算核心为.PLA是一种分类方法,这里介绍线性回归方法(与概率与统计 ...
- Kindle Paperwhite 2使用体验
博客开通后一懒就扔下了几十天,着实自惭.鉴于是第一篇,先说点题外话. 一转眼读研的生活已经过去一年有余.曾经的同学已经在职场拼搏,同龄人的生活状态也自然地带给自己一份紧迫感:不敢再贪恋校园生活的安逸, ...
- java易混淆概念之类变量、成员变量、局部变量
类变量.成员变量.局部变量 类变量(也叫静态变量)是类中独立于方法之外的变量,用static 修饰.(static表示“全局的”.“静态的”,用来修饰成员变量和成员方法,或静态代码块(静态代码块独 ...
- Windows7 32位下opencv与python2.66的环境配置
刚接触Python和OpenCV,对两者都不太了解,因为今后学习会使用到这两种工具,特此学习配置.PS:本帖适用小白. 一. 需要的文件 1. OpenCV 可用OpenCV-2.3.1-win-su ...
- 30 分钟 Java Lambda 入门教程
Lambda简介 Lambda作为函数式编程中的基础部分,在其他编程语言(例如:Scala)中早就广为使用,但在Java领域中发展较慢,直到java8,才开始支持Lambda. 抛开数学定义不看,直接 ...