Grunt:自动任务运行器

[b]干什么用?[/b]
基于Node.js的一款能够按照预先设定的顺序自动运行一系列任务的工具。简化工作流程,减轻重复性工作带来的负担。

[b]如何使用?[/b]
1.安装
sudo npm install grunt-cli -g


2.命令脚本文件Gruntfile.js--用于配置或定义任务、加载 Grunt 插件

1)grunt.initConfig:配置Grunt各种模块的参数

2)grunt.loadNpmTasks:加载模块文件

grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-concat');


对于加载多个模块的方法:安装load-grunt-tasks模块
require('load-grunt-tasks')(grunt)
替代所有tasks语句,自动分析package.json文件,在使用npm命令卸载模块以后,模块会自动从package.json文件中消失,这样就避免了必须手动从Gruntfile.js文件中清除的麻烦。

3)grunt.registerTasks :定义如何调用任务

不提供参数:grunt 依次执行任务
提供参数: grunt 模块名:目标名 只执行某个任务

grunt # 默认情况下,先压缩后合并
grunt cssmin:minify # 只压缩不合并
grunt css:combine # 只合并不压缩


[b]常用的模块[/b]
grunt-contrib-clean 删除文件 [url]https://www.npmjs.com/package/grunt-contrib-clean[/url]
grunt-contrib-compass 用compass编译sass [url]https://www.npmjs.com/package/grunt-contrib-compass[/url]
grunt-contrib-concat 合并文件 [url]https://www.npmjs.com/package/grunt-contrib-concat[/url]
grunt-contrib-copy 复制文件 [url]https://www.npmjs.com/package/grunt-contrib-copy[/url]
grunt-contrib-cssmin 压缩css [url]https://www.npmjs.com/package/grunt-contrib-cssmin[/url]
grunt-contrib-imagemin 图像压缩 [url]https://www.npmjs.com/package/grunt-contrib-imagemin[/url]
grunt-contrib-jshint 检查js语法 [url]https://www.npmjs.com/package/grunt-contrib-jshint[/url]
grunt-contrib-uglify 压缩合并js [url]https://www.npmjs.com/package/grunt-contrib-uglify[/url]
grunt-contrib-watch 监视文件变动做相应动作 [url]https://www.npmjs.com/package/grunt-contrib-watch[/url]
grunt-contrib-connect 运行一个Web服务 [url]https://www.npmjs.com/package/grunt-contrib-connect[/url]
grunt-contrib-sass sass转为css
grunt-autoprefixer css语句加浏览器前缀
grunt-htmlhint 检查HTML语法
grunt-contrib-stylus 编写styl输出css [url]https://www.npmjs.com/package/grunt-contrib-stylus[/url]

3.package.json--用于保存项目元数据
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值