你需要检查js语法错误,然后再去压缩js代码。如果这两步你都去手动操作,会耗费很多成本。
Grunt就能让你省去这些手动操作的成本。

“—save-dev”的意思是,在当前目录安装grunt的同时,顺便把grunt保存为这个目录的开发依赖项。看到“开发依赖项”这一次,是不是觉得有些眼熟?
上文在配置package.json时,其中的“devDependencies”中就会存储开发依赖项。

下面就是一些常有grunt开发依赖插件

Contrib-jshint——javascript语法错误检查;
Contrib-watch——实时监控文件变化、调用相应的任务重新执行;
Contrib-clean——清空文件、文件夹;
Contrib-uglify——压缩javascript代码
Contrib-copy——复制文件、文件夹
Contrib-concat——合并多个文件的代码到一个文件中
karma——前端自动化测试工具

使用uglify插件(压缩javascript代码)
Uglify插件的功能就是压缩javascript代码。至于javascript代码压缩的必要和意义有很多,这里就不用说了
几乎每一个javascript类库或者框架,都有一个 **.min.js 压缩版。

“options”中规定允许生成的压缩文件带banner,即在生成的压缩文件第一行加一句话说明。
注意,其中使用到了pkg获取package.json的内容。
banner选项(用于在文件顶部生成一个注释)

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

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

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

Gruntfile: 此文件被命名为 Gruntfile.js 或 Gruntfile.coffee,用来配置或定义任务(task)并加载Grunt插件的。 此文档中提到的 Gruntfile 其实说的是一个文件,
文件名是 Gruntfile.js 或 Gruntfile.coffee。

package.json应当放置于项目的根目录中,与Gruntfile在同一目录中,并且应该与项目的源代码一起被提交。

过npm install <module> --save-dev命令。此命令不光安装了<module>,还会自动将其添加到devDependencies 配置段中,
遵循tilde version range格式。

build的uglify目标,用于将一个js文件压缩为一个目标文件。

只要在 package.json 文件中被列为dependency(依赖)的包,并通过npm install安装之后,都可以在Gruntfile中以简单命令的形式使用:

通过定义 default 任务,可以让Grunt默认执行一个或多个任务。
这和执行grunt uglify 或者 grunt default的效果一样。default任务列表数组中可以指定任意数目的任务(可以带参数)。

src-dest(源文件-目标文件)文件映射的方式
所有的文件格式都支持src和dest属性
然这并不是一个综合的匹配模式方面的教程,你只需要知道如何在文件路径匹配过程中使用它们即可:

// 指定单个文件:
{src: 'foo/this.js', dest: ...}
// 指定一个文件数组:
{src: ['foo/this.js', 'foo/that.js', 'foo/the-other.js'], dest: ...}
// 使用一个匹配模式:
{src: 'foo/th*.js', dest: ...}

// 一个独立的node-glob模式:
{src: 'foo/{a,b}*.js', dest: ...}
// 也可以这样编写:
{src: ['foo/a*.js', 'foo/b*.js'], dest: ...}

// foo目录中所有的.js文件,按字母顺序排序:
{src: ['foo/*.js'], dest: ...}
// 首先是bar.js,接着是剩下的.js文件,并按字母顺序排序:
{src: ['foo/bar.js', 'foo/*.js'], dest: ...}

// 除bar.js之外的所有的.js文件,按字母顺序排序:
{src: ['foo/*.js', '!foo/bar.js'], dest: ...}
// 按字母顺序排序的所有.js文件,但是bar.js在最后。
{src: ['foo/*.js', '!foo/bar.js', 'foo/bar.js'], dest: ...}

// 模板也可以用于文件路径或者匹配模式中:
{src: ['src/<%= basename %>.js'], dest: 'build/<%= basename %>.min.js'}
// 它们也可以引用在配置中定义的其他文件列表:
{src: ['foo/*.js', '<%= jshint.all.src %>'], dest: ...}

使用<% %>分隔符指定的模板会在任务从它们的配置中读取相应的数据时将自动扩展扫描。
模板会被递归的展开,直到配置中不再存在遗留的模板相关的信息(与模板匹配的)。

concat: {
options: {
// 定义一个用于插入合并输出文件之间的字符
separator: ';'
},
dist: {
// 将要被合并的文件
src: ['src/**/*.js'],
// 合并后的JS文件的存放位置
dest: 'dist/<%= pkg.name %>.js'
}
} uglify: {
options: {
// 此处定义的banner注释将插入到输出文件的顶部
banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
},
dist: {
files: {
'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
}
} 最后设置了一些task。最重要的是default任务:
// 在命令行上输入"grunt test",test task就会被执行。
grunt.registerTask('test', ['jshint', 'qunit']); // 只需在命令行上输入"grunt",就会执行default task
grunt.registerTask('default', ['jshint', 'qunit', 'concat', 'uglify']);
官方文档配置Grungfile.js
module.exports = function(grunt) { grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
options: {
separator: ';'
},
dist: {
src: ['src/**/*.js'],
dest: 'dist/<%= pkg.name %>.js'
}
},
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
},
dist: {
files: {
'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
}
}
},
qunit: {
files: ['test/**/*.html']
},
jshint: {
files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
options: {
//这里是覆盖JSHint默认配置的选项
globals: {
jQuery: true,
console: true,
module: true,
document: true
}
}
},
watch: {
files: ['<%= jshint.files %>'],
tasks: ['jshint', 'qunit']
}
}); grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-qunit');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-concat'); grunt.registerTask('test', ['jshint', 'qunit']); grunt.registerTask('default', ['jshint', 'qunit', 'concat', 'uglify']); };

wrapper函数,这是Node.js的典型写法,使用exports公开API

grunt-contrib-thmlmin options属性
Options 选项

以下选项类型均为布尔型,默认值均为false。

removeComments

删除HTML注释

removeCommentsFromCDATA

删除<script>和<style>标签内的HTML注释

removeCDATASectionsFromCDATA

类型:布尔

默认:false

删除<script>和<style>标签中的CDTA区段

collapseWhitespace

删除文档树中文本节点的空白。不会影响重大的空白,比如在SCRIPT,STYLE,PRE或TEXTAREA等元素内容。

collapseBooleanAttributes

删除布尔属性

<input disabled="disabled"> => <input disabled>

removeAttributeQuotes

删除属性的引号,当安全的情况下。

removeRedundantAttributes

删除多余的属性,像type="text/javascript"。

useShortDoctype

用短的HTML5的<!DOCTYPE html>代替doctype

removeEmptyAttributes

删除空(或空白)属性

removeOptionalTags

一些元素允许省略标签,像</td>

removeEmptyElements

删除空元素

grunt学习笔记1 理论知识的更多相关文章

  1. 大数据学习笔记——HDFS理论知识之编辑日志与镜像文件

    HDFS文件系统——编辑日志和镜像文件详细介绍 我们知道,启动Hadoop之后,在主节点下会产生Namenode,即名称节点进程,该节点的目录下会保存一份元数据,用来记录文件的索引,而在从节点上即Da ...

  2. Grunt 学习笔记【2】---- 配置和创建任务

    本文主要讲Grunt任务配置. 说明:本文所有示例都基于Grunt 0.4.5版本. 一 说明 使用Grunt实现项目的打包等工程化工作,实际上是通过Grunt提供的机制和插件,配置一个个任务(例如: ...

  3. TestNG学习-001-基础理论知识

    此 文主要讲述用 TestNG 的基础理论知识,TestNG 的特定,编写测试过程三步骤,与 JUnit4+ 的差异,以此使亲对 TestNG 测试框架能够有一个简单的认知. 希望能对初学 TestN ...

  4. MyBatis:学习笔记(1)——基础知识

    MyBatis:学习笔记(1)--基础知识 引入MyBatis JDBC编程的问题及解决设想 ☐ 数据库连接使用时创建,不使用时就释放,频繁开启和关闭,造成数据库资源浪费,影响数据库性能. ☐ 使用数 ...

  5. C#学习笔记(基础知识回顾)之值类型与引用类型转换(装箱和拆箱)

    一:值类型和引用类型的含义参考前一篇文章 C#学习笔记(基础知识回顾)之值类型和引用类型 1.1,C#数据类型分为在栈上分配内存的值类型和在托管堆上分配内存的引用类型.如果int只不过是栈上的一个4字 ...

  6. C#学习笔记(基础知识回顾)之值传递和引用传递

    一:要了解值传递和引用传递,先要知道这两种类型含义,可以参考上一篇 C#学习笔记(基础知识回顾)之值类型和引用类型 二:给方法传递参数分为值传递和引用传递. 2.1在变量通过引用传递给方法时,被调用的 ...

  7. C#学习笔记(基础知识回顾)之值类型和引用类型

    一:C#把数据类型分为值类型和引用类型 1.1:从概念上来看,其区别是值类型直接存储值,而引用类型存储对值的引用. 1.2:这两种类型在内存的不同地方,值类型存储在堆栈中,而引用类型存储在托管对上.存 ...

  8. JAVA学习笔记—review基本知识[反射与异常]

    JAVA学习笔记—review基本知识[反射与异常] 1.异常: 1.1异常的分类: Java会将所有的异常封装成对象,其根本父类为Throwable. Throwable有两个子类:Error 和E ...

  9. Quartz学习笔记:基础知识

    Quartz学习笔记:基础知识 引入Quartz 关于任务调度 关于任务调度,Java.util.Timer是最简单的一种实现任务调度的方法,简单的使用如下: import java.util.Tim ...

随机推荐

  1. fis3+vue+pdf.js制作预览PDF文件或其他

    人生第一篇博客,的确有点紧张,但有些许兴奋,因为这对于我来说应该是一个好的开始,以此励志在技术的道路上越走越远. 看过了多多少少的技术博客,给自己带来了很多技术上的收获,也因此在想什么时候自己也可以赠 ...

  2. flannel 的连通与隔离 - 每天5分钟玩转 Docker 容器技术(61)

    上一节我们在 flannel 网络中部署了容器,本节讨论 flannel 的连通和隔离特性. flannel 网络连通性 测试 bbox1 和 bbxo2 的连通性: bbox1 能够 ping 到位 ...

  3. 把elipse非maven的Struts2+Spring+Ibatis项目导入Idea中

    1.按图示操作 2.选中自己要得到的项目 3.之后设定得到的项目放在哪里 项目得到之后,对项目点击右键Open Module Settings,点击Project,设置生成的编译文件存储路径 4.单击 ...

  4. ==与equal

    @ 对象类型比较:(引用类型) ==和equal都表示对象引用的内存地址是否相同 对象类型继承Object并重写方法equal()用于对象的比较 @ 字符串比较: ==表示String引用的内存地址是 ...

  5. selenium,html高宽设置成了0,会影响元素可见性,怎么手动修改某个元素的高宽?

     问题:要js的话,需要用webelment,此时元素已经是不可见了   ((JavascriptExecutor) this.driver).executeScript("argument ...

  6. MySql数据库导入导出

    1.导出整个数据库     mysqldump -u 用户名 -p 数据库名 > 存放位置     比如:     mysqldump -u root -p project > c:/a. ...

  7. 自己为什么注册博客(csdn讲师:Array)

    记录生活,记录技术,记录青春. 势若在己,则人力可以至:势若在人,则忧心亦无益. 倘若势不在己,该怎么办? 天下之势,本如流水.若流于他处,则处心积虑,断流开源,独占大势. 这是一个最好的时代,也是一 ...

  8. Springmvc_validation 效验器

    springmvc-validation效验器的使用介绍 对于任何一个应用来说,都会做数据的有效性效验,但是只在前端做并不是很安全,考虑到安全性這个时候会要求我们在服务端也对数据进行有效验证,spri ...

  9. Liunx-常用命令的总结(5)

    cd     ../dir        上一节目录下dir目录 cd -                    返回上次目录 ifconfig            查看IP地址 sudo   if ...

  10. 解决Android Studio中Refreshing gradle project时间过长的最简单方法

    Refreshing gradle project往往出现在Gradle出现更新,需要从墙外的网重新拖下来的前提下.具体可以查看以下文件:/path/to/project/gradle/wrapper ...