grunt的使用
当今时代,前端代码变的庞大复杂,代码维护、打包极其困难。所以前端的自动化构建工具显得尤为重要。我们要讲的就是grunt。grunt是一个基于node.js的自动化构建、测试、生成文档的项目管理工具。
一.安装grunt
1.安装grunt之前首先得安装node:从官网上下载,安装即可,在命令行中输入:node –v,出现版本号,就说明已经安装完成了。
2.首先全局安装grunt,用管理员方式打开命令行:npm install –g grunt-cli; 想要检测是否安装完成就用grunt命令看看。
二.创建一个网站
1.首先在桌面上创建一个文件夹grunt sample,在该文件夹下新建两个文件夹build和src,和两个文件Gruntfiles.js和package.json
package.json文件内容长这样:
“name”为项目名;version为该项目的版本号;devDependencies下面要写一些所依赖的项
Gruntfiles.js内容长这样:
2. 将命令行工具切换到项目文件夹下安装grunt:npm install grunt –save-dev(加save-dev就能将安装的版本都记录到package.json的devDependencies中)
package就变成:
并且文件夹下多了一个node_modules文件。
3.配置Gruntfiles.js
Grunt功能强大,比如说验证HTML、CSS、JavaScript的语法,压缩CSS、JavaScript、图像,Sass、LESS和Stylus编译成CSS等等,但是这些都得用插件来实现,所以我们就需要配置gruntfiles.js文件。
插件分为两类。第一类是grunt团队贡献的插件,这些插件的名字前面都带有“contrib-”前缀,而且在插件列表中有星号标注。第二类是第三方提供的插件,不带有这两个特征。我们就来使用一下uglify压缩插件:
a) 首先在src文件夹下新建一个js文档:
b) 然后安装插件:npm install grunt-contrib-uglify(用于js压缩的插件)
c) 在Gruntfiles.js配置文件中进行该插件的配置如下,在grunt.initConfig下插入该插件的配置信息
d) 继续配置如下:
e) 在grunt命令执行时,要不要立即执行uglify插件?如果要,就写上,否则不写。
f) 在终端输入grunt之后在build文件下就会多出:
同理可以使用其他的各种插件如:
- Contrib-jshint——javascript语法错误检查;
- Contrib-watch——实时监控文件变化、调用相应的任务重新执行;
- Contrib-clean——清空文件、文件夹;
- Contrib-uglify——压缩javascript代码
- Contrib-copy——复制文件、文件夹
- Contrib-concat——合并多个文件的代码到一个文件中
- karma——前端自动化测试工具