[b]干什么用?[/b]
基于Node.js的一款能够按照预先设定的顺序自动运行一系列任务的工具。简化工作流程,减轻重复性工作带来的负担。
[b]如何使用?[/b]
1.安装
2.命令脚本文件Gruntfile.js--用于配置或定义任务、加载 Grunt 插件
1)grunt.initConfig:配置Grunt各种模块的参数
2)grunt.loadNpmTasks:加载模块文件
对于加载多个模块的方法:安装load-grunt-tasks模块
3)grunt.registerTasks :定义如何调用任务
不提供参数:grunt 依次执行任务
提供参数: grunt 模块名:目标名 只执行某个任务
[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--用于保存项目元数据
基于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--用于保存项目元数据