使用grunt压缩代码&配置多个任务

grunt是node环境下一个压缩、合并 js、css代码的工具,还可以做一下代码美化等。体验了一下压缩合并,还是不错的,大概流程如下:

在工程下建一个grunt目录,写两个文件 package.json-工程依赖Gruntfile.js-压缩任务

package.jsn:

Gruntfile.js:

这个Gruntfile很容易理解,想要压缩的文件以及目标文件写好就行,还有另一种自动化的写法,后面再说。

之后运行命令,grunt

1

出现了一个错误,网上解释

Note that installing grunt-cli does not install the grunt task runner! The job of the grunt CLI is simple: run the version of grunt which has been installed next to a Gruntfile. This allows multiple versions of grunt to be installed on the same machine simultaneously.

So in your project folder, you will need to install (preferably) the latest grunt version:

也就是说,之前装的grunt-cli只是grunt的运行环境,在工程目录下,还需要装一下grunt,运行一下命令:

2

之后再次运行grunt命令,又出现错误:

3

好吧,没有装这三个插件?原来是grunt一样,也要在工程下装,分别运行 npm install装一下,运行,成功:

4

工程复杂之后,肯定不会一个一个手动填文件,grunt也可以通过逻辑自动压缩js css文件,Gruntfile.js写法:

逻辑也很简单,就是把src里面的文件,压缩,生成文件会经过rename函数处理。

这里面需要注意的地方有

如果只写一个*.js,是不会递归cwd目录下的所有文件的,要递归几级写到数组中就可以了,如果不想添加什么文件,加!符号-‘!*.min.js’。

当然,这次也没有一帆风顺,运行的时候遇到错误:

5

报错在 最后一句,

查了半天也没找到这里有什么错误,网上搜了一下,大多数是 中括号里的uglify没有引号,跟我的情况也不一样。后来仔细检查了一下代码,发现了两处拼写错误,改了后就运行通过了,也就是说,其他错误都会报到最后一句。

做了一个小小的试验,写一个空模块

压缩后是这样的:

对,什么都没了。

 

最近有新的需求,压缩不同版本的文件,就需要开多个contact uglify任务,琢磨了一会,搞出来了,同时对grunt有了进一步的认识。

配置多任务是这么写的

r简单看一下配置文件

contact

首先配置了option,option中配置了不同文件中间增加;分隔符。

这个是contact所有任务的全局配置

后面又写了三个合并任务,分别配置下src和dest就可以了。

合并顺序就是 src中配置的顺序,*.js则按照字母排序。

uglify

uglify中配置了三个压缩任务,

压缩contact的文件

压缩所有文件并生成.min.js

最后运行

会自动加载contact和uglify中的所有任务。

来源于http://www.haorooms.com/post/qd_grunt_cssjs。

ES6新特性

ECMAScript出现了许多有趣的新特性,梳理一下:

1.支持constant声明

ES5中,想实现constant变量必须通过修改var的property实现

2.支持块作用域声明let,

JS只有函数作用域,没有块作用域,var声明有变量提升的效果,即如果var声明了一个未声明过的变量,会自动将此声明提升到顶端,所以想实现块作用域在ES5中是通过闭包的形式。

同时ES6也支持了块级作用域的函数

3.一种function的新写法

function中支持this的使用

4.undefined参数默认配置

ES6:

等效于ES5:

5.支持剩余参数写法

即...p写法会被解释为

ES6:

ES5:

6.可以直接在字符串中加入${表达式}

即console.log("Error: ${e.toString()}");

7.引用

8.支持class 继承,setter、getter

9.支持Promise Generators(待学习)

10.bufferArray