什么是grunt:一个javascript任务运行器。
安装步骤:
1、安装nodejs(生成npm[npm是nodejs的包管理器])
2、安装grunt-cli(grunt命令行)
全局安装grunt-cli :打开命令行输入 npm install -g grunt-cli
说明安装成功!
3、grunt的安装和使用方法
a.在F盘下新建一个grunt文件夹,里面建2个空文件夹(build和src),一个grunt配置文件(Gruntfile.js)[G大写]
b.在当前目录下输入命令行:npm init 一步步next之后,会出现一个package.json的文件,如图所示:
这个文件告诉我们项目的名称、版本号、描述、入口文件、作者等等。devDependencies{}告诉我们开发这个项目所要用到的所有插件。。。
4、安装grunt插件(所有要用到的插件都这么装)
在当前目录下输入命令行:npm install grunt –save-dev [–save-dev的意思就是说在当前目录下安装grunt的同时,顺便设置为该项目的开发依赖项]。安装成功后会在当前目录下新生成一个文件夹,如图所示:
并且在package.json的项目依赖配置文件里”devDependencies”会自动添加grunt的及其版本号。在自动生成的node_mudules里也会出现grunt文件夹(源文件),说明gurnt插件安装成功了。
5、配置Gruntfile.js文件
顾名思义:就是告诉grunt要做哪些事情。
先看一下简单配置:如图所示
不妨先运行一下grunt:在命令行输入:grunt看看会出现什么--‘Done,without errors.’继续
6、Grunt插件介绍:Grunt官网
其中’contrib-‘是官方的并且标有星号标注,其他都是第三方提供的当然是通过官方审核的。先看几个简单常用的。
Contrib-jshit——javascript语法错误检查
Contrib-watch——实时监控文件变化、调用相应的任务重新执行;
Contrib-clean——清空文件、文件夹
Contrib-uglify——压缩javascript代码
Contrib-copy——复制文件、文件夹
Contrib-concat——合并多个文件的代码
karma——前端自动化测试工具
7、使用uglify插件(压缩javascript代码)
a.安装uglify插件
在当前目录下输入命令行输入:npm install grunt-contrib-uglify –save-dev这时在package.json和node_modules都会增加相应的信息和文件夹
b.配置Gruntfiles.js告诉插件要做什么
c.先准备一个zepto.js文件(未压缩过的)
然后开始在Gruntfile.js配置
//包装函数
module.exports = function(grunt) {
//任务配置,所有插件的配置信息
grunt.initConfig({
//获取package.json的信息
pkg:grunt.file.readJSON('package.json'),
//uglify插件的配置信息
uglify:{
options:{
stripBanners:true,
banner:'/*!<%=pkg.name%>-<%=pkg.version%>.js <%=grunt.template.today("yyyy-mm-dd")%>*/\n'
},
build:{
src:'src/zepto.js',
dest:'build/<%=pkg.name%>.min.js'
}
}
})
//告诉grunt我们将使用的插件
grunt.loadNpmTasks('grunt-contrib-uglify');
//告诉grunt当我们在终端输入gurnt时需要做些什么(注意先后顺序)
grunt.registerTask('default',['uglify']);
};
第一步:pkg:获取package.json中的内容
第二步:对“uglify”配置
“options”中允许生成的压缩文件带banner,即在生成的压缩文件的加一段说明。
“build” 中配置源文件和目标文件。即规定要压缩谁?压缩之后会生成谁?build文件如果没有会自动生成。
第三步:告诉 grunt要使用的插件,如果要就写,不要就不写。
第四步:在控制台输入:grunt 得到结果如图:
我们发现在build下自动生成了一个压缩后的文件(文件大小发生了变化)。说明uglify压缩成功了。
8、使用jshint插件(检查javascript语法错误)
a.安装 ,命令行 npm install grunt-contrib-jshint – save-dev
b.配置,
‘.jshintrc’文件中代码的格式遵守严格的json语法,否则无效。
c.加载插件【这里没有先后顺序】
d.配置grunt命令启动,【这里有先后顺序】。你是希望先检查语法呢,还是先合并呢。——一般我们都是先检查语法的!!!
运行:
我们发现这里报错,并且没有执行合并,说明uglify并没有执行这就是我们想要的结果。
9、使用watch插件(真正实现自动化)
a.安装,
b.配置watch将监控那些文件的变化,以及这些文件一旦变化,要立即执行那些插件功能。
//watch插件的配置信息
watch:{
files:['src/*.js'],
tasks:['jshint','uglify'],
options:{spawn:false}
}
watch将监控src文件夹下所有的js文件的变化,一旦变化立即执行jshint和uglify两个插件功能。
c.加载
grunt.loadNpmTasks('grunt-contrib-watch');
d.配置grunt启动项
grunt.registerTask('default',['jshint','uglify','watch']);
e.运行
我们发现watch已经开始监控了。。。
现在我们对test.js文件做些更改并保存我们发现:
提示我们test.js文件发生了更改,并执行了‘jshint’方法。更重要的是,它现在还在监听、并未停止。那么我们将错误改正回来:
我们发现,test.js文件再次发生了变化,这次语法没有错误,并顺利的执行了jshint和uglify,执行完毕之后,重新监听。我们实现了——自动化。