grunt是压缩代码,合并代码,检测代码书写规范
grunt也是前端自动化,构建项目工具
grunt官网:http://www.gruntjs.net/
grunt是基于:nodeJs
在cmd环境验证是否靠谱并检查版本:node -v和npm -v
一:grunt使用流程
1.使用cmd安装grunt命令环境
npm install grunt-cli -g
使用cmd验证是否安装成功
grunt --version
2.需要准备两个文件
Gruntfile.js 编写任务
package.json 工程文件(项目配置文件)
3.编写具体任务
module.exports=function (grunt){};
4.运行任务
需要找到,Gruntfile这个js所在目录
*在cmd命令行里面输入:grunt
5.使用cmd安装本地grunt
需要在本地安装grunt
npm install grunt
二:如何使用grunt压缩js,contrib-uglify
使用方法:grunt-contrib-uglify
1:grunt编写具体任务格式(sjon格式):
主任务名:{
子任务名:{},
子任务名:{},
子任务名:{},
子任务名:{},
子任务名:{},
子任务名:{},
子任务名:{}
}
2:在cmd命令下载contrib-uglify模块
npm install grunt-contrib-uglify
运行
grunt ugligy(主任务名称)
3:在cmd命令下载css模块
npm install grunt-contrib-cssmin
4:配置文件
package.json
在cmd命令行输入
npm install grunt --save-dev
npm init
5:在cmd命令下载监听
npm install grunt-contrib-watch
gulp是:前端自动化构建工具,跟grunt一样,gulp运行比grunt快
一:gulp和grunt区别:
1:gulp:快,跟nodejs一样快
2:grunt:相对慢
3:公司里面大部分情况用的都是gulp
官网:http://www.gulpjs.com.cn/
插件:http://gulpjs.com/plugins/
二:使用流程
1.使用cmd安装一个全局gulp命令环境
npm install gulp-cli -g
2.使用cmd验证安装成功
gulp --version
3.准备俩文件
gulpfile.js gulp任务编写文件
package.json 工程文件
4.编写gulp任务
引入模块
编写任务
5.使用cmd安装本地gulp
npm install gulp
6.下载模块
npm install gulp-uglify
npm install gulp-cssmin
npm install gulp-html
npm install gulp-rename
7.使用cmd运行
gulp+任务名