各位web前端开发人员,如果你现在还不知道grunt或者听说过、但是不会熟练使用grunt,那你就真的真的真的out了(三个“真的”重复,表 示重点)。至于grunt的作用,这里不详细说了,总之你如果做web前端开发,你一定要用grunt。还有一点,它完全免费,没有盗版。既强大又免费的 东西,为何不用?
当然了,你如果你能找到更好的替代grunt的其他工具也是可以的,例如gulp。Gulp未来有可能替代grunt,但是现在来说市场占有率还是不如grunt。而这种工具咱们是现在就需要用的,所有不要再犹豫了,拿来主义,先用grunt,即学即用。
本文章旨在讲解grunt入门,以及讲解grunt最常用的几个插件的使用。篇幅可能会比较长,大家耐心看。本文例证详细、清晰的讲解每一个知识点。 但是——如果你看完本文还是不会,我还有最后一个大招。不过你可能需要付出一顿饭钱 + 一包烟钱的代价——去看看我录制的视频教程《用grunt搭建自动化的web前端开发环境》(教程中有源码下载) ,保证你看完就会用。
(PS:碰巧,本文基于windows环境写的,而视频教程是基于mac os录制的,两者兼备了)
废话不多少,视频教程你也先别看,钱别着急花。先挑战一下自己的理解能力,看下文讲述是否清晰、是否能看懂。
教程参考:http://developer.51cto.com/art/201506/479127.htm
中文官网:http://www.gruntjs.net/getting-started
npm install -g grunt-cli
npm install grunt --save-dev
文档目录
插件安装
npm install grunt-contrib-csslint --save-dev css语法检查
npm install grunt-contrib-cssmin --save-dev css压缩
npm install grunt-contrib-jshint --save-dev js语法检查
npm install grunt-contrib-uglify --save-dev js压缩
npm install grunt-contrib-watch --save-dev 自动化检查
css语法检查
.csslintrc
{
"adjoining-classes":false,
"box-sizing":false,
"box-model" : false,
"compatible-vendor-prefixes": false,
"floats":false,
"font-sizes":false,
"gradients":false,
"important":false,
"known-properties":false,
"outline-none":false,
"qualified-headings":false,
"regex-selectors":false,
"shorthand":false,
"text-indent":false,
"unique-headings":false,
"universal-selector":false,
"unqualified-attributes":false
}
js语法检查配置文件
.jshintrc
{
"boss":false,
"curly":true,
"eqeqeq":true,
"eqnull":true,
"expr":true,
"immed":true,
"newcap":true,
"noempty":true,
"noarg":true,
"undef":true,
"regexp":true,
"browser":true,
"devel":true,
"node":true
}
Gruntfiles.js
//包装函数
module.exports = function(grunt){
//任务配置,所有插件的配置信息
grunt.initConfig({
//获取package.json的信息
pkg: grunt.file.readJSON('package.json'),
// ugilify插件的配置信息
uglify:{
option:{
stringBanners:true,
banner:'/*<%=pkg.name%>-<%=pkg.version%>.js <%- grunt.template.today("yyyy-mm-dd")%>*/\n'
},
bulid:{
src:"src/test.js",
dest:'bulid/<%=pkg.name%>-<%=pkg.version%>.js.min.js'
}
},
//jshint插件配置信息
jshint:{
bulid:['Gruntfile.js','src/*.js'],
options:{
jshintrc:'.jshintrc'
}
},
csslint:{
bulid:['Gruntfile.js','src/*.css'],
options:{
csslintrc:'.csslintrc'
}
},
//watch 插件的配置信息
watch:{
bulid:{
files:['src/*.js','src/*.css'],
tasks:['jshint','csslint','uglify'],
options:{spawn:false}
}
}
});
// 告诉grunt我们将使用的插件
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-csslint');
grunt.loadNpmTasks('grunt-contrib-watch');
// 告诉grunt当我们在终端中输入grunt时需要做些什么(注意先后顺序)
grunt.registerTask('default',['jshint','uglify','csslint','watch']);
};