前端开发Grunt工具的安装使用
随着前端开发效果越来越丰富，前端的结构也越来越复杂，这个时候就需要一个工具来进行管理，可以帮你做语法校验，文件拼接，代码压缩，文件清理等等琐事，Grunt就是这么一个不错的工具。
安装并不复杂，只要先安装nodejs和npm即可，这里介绍Ubuntu上的安装过程，不过Windows平台更加简单，去nodejs的官网下载一个稳定版本安装一下就完事了。
sudo apt install nodejs npm //安装nodejs，npm sudo npm install -g grunt-cli //安装grunt的全局客户端 sudo ln -s /usr/bin/nodejs /usr/bin/node //解决找不到node文件或者文件夹错误
做完这些步骤，grunt就安装完毕了，可以通过node -v和npm -v来查看版本，注意不要用版本太低的版本，下载了其他库之后容易造成不兼容的问题。通过源上安装的，一般都是最新的稳定版本。
使用方法这里介绍一下，grunt的配置文件主要包含两个Gruntfile.js和package.json，其中Gruntfile.js就是我们用来编写执行脚本的文件，package.json则是用来保持项目基本配置信息的文件。通过执行
sudo npm init
可以开启一个初始化过程，在过程里可以填写项目的一些基本信息，也可以自己手动创建这个文件
//文件范例，也可以定义一些自定义的参数，遵循JSON的语法即可 { "name": "demo", //项目名称 "version": "0.1.0", //版本号 "description": "demo", //项目描述 "license": "MIT", //协议 "devDependencies": { //使用的库的版本 "grunt": "^0.4.5", "grunt-cmd-transport": "~0.5.0", "grunt-contrib-clean": "~0.5.0", "grunt-contrib-concat": "~0.5.0", "grunt-contrib-copy": "~0.4.1", "grunt-contrib-jshint": "~0.6.3", "grunt-contrib-requirejs": "~0.4.1", "grunt-contrib-uglify": "~0.2.1", "grunt-strip": "~0.2.1" }, "dependencies": { "express": "3.x" } }
其中devDependencies节点一般不需要自己的填写。这个在安装库的时候，在命令尾部添加--save-dev会自动添加到这个节点。
常用的库包括以下几个：
sudo npm install grunt --save-dev sudo npm install grunt-contrib-uglify --save-dev //使用uglifyJS进行js代码压缩 sudo npm install grunt-contrib-clean --save-dev //用于清理文件或者文件夹 sudo npm install grunt-contrib-copy --save-dev //复制文件和文件夹 sudo npm install grunt-contrib-jshint --save-dev //javascript 语法验证 sudo npm install grunt-contrib-contcat --save-dev //合并文件 sudo npm install grunt-contrib-cssmin --save-dev //压缩css文件 sudo npm install grunt-contrib-less --save-dev //把less文件编译为css文件 sudo npm install grunt-contrib-requirejs --save-dev //使用r.js优化RequireJS 项目 sudo npm install grunt-contrib-comprass --save-dev //使用Compass编译Sass sudo npm install grunt-contrib-sass --save-dev //编译Sass文件 sudo npm install grunt-contrib-csslint --save-dev //语法验证css文件 sudo npm install load-grunt-tasks --save-dev //运用package.json中的配置加载插件的插件
关于Gruntfile.js的文件结构如下范例
/*! * XXX's Gruntfile */ module.exports = function(grunt) { 'use strict'; grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), // Metadata. meta: { libPath: 'lib/', distPath: 'dist/', jsPath: 'js/', sassPath: 'sass/', examplesPath: 'examples/hello/' }, banner: '/*!\n' + ' * =====================================================\n' + ' * XXX v<%= pkg.version %> (<%= pkg.homepage %>)\n' + ' * =====================================================\n' + ' */\n', clean: { all: ['<%= meta.distPath %>'] }, concat: { xxx: { options: { banner: '<%= banner %>' }, src: [ 'js/a.js', 'js/b.js' ], dest: '<%= meta.distPath %>js/<%= pkg.name %>.js', } }, copy: { fonts: { expand: true, src: 'fonts/xxx*.ttf', dest: '<%= meta.distPath %>/' }, examples: { expand: true, cwd: '<%= meta.distPath %>', src: ['**/xxx*'], dest: '<%= meta.examplesPath %>' } }, cssmin: { options: { banner: '', // set to empty; see bellow keepSpecialComments: '*', // set to '*' because we already add the banner in sass sourceMap: false }, xxx: { src: '<%= meta.distPath %>css/<%= pkg.name %>.css', dest: '<%= meta.distPath %>css/<%= pkg.name %>.min.css' } }, uglify: { options: { banner: '<%= banner %>', compress: {}, mangle: true, preserveComments: false }, mui: { src: '<%= concat.xxx.dest %>', dest: '<%= meta.distPath %>js/<%= pkg.name %>.min.js' } }, jshint: { options: { jshintrc: 'js/.jshintrc' }, grunt: { src: ['Gruntfile.js', 'grunt/*.js'] }, src: { src: 'js/*.js' } }, csslint: { options: { csslintrc: 'sass/.csslintrc' }, src: [ '<%= meta.distPath %>/css/<%= pkg.name %>.css', ] } }); // Load the plugins require('load-grunt-tasks')(grunt, { scope: 'devDependencies' }); // Default task(s). grunt.registerTask('cleanAll', ['clean']); grunt.registerTask('dist-css', [ 'cssmin', 'clean:sourceMap']); grunt.registerTask('dist-js', ['concat', 'uglify']); grunt.registerTask('dist', ['clean:all', 'dist-css', 'dist-js', 'copy']); grunt.registerTask('build', ['dist']); grunt.registerTask('default', ['dist']); };
一般常用的包括文件及文件夹清理，css文件校验，css文件合并，css文件压缩，js文件校验，js文件合并，js文件压缩，文件拷贝等几个功能。学会使用这几个功能就可以满足大部分的前端打包需求了。
另外，针对jshint的校验，经常会碰到的问题及处理方法
（1）Mixed double and single quotes /* jshint -W110 */ （2）'{a}' is defined but never used /* jshint unused:vars, -W004 */ （3）Don't make functions within a loop /* jshint loopfunc:true */ （4）Confusing use of '!' /* jshint -W018 */ （5）“‘{a}’ is not defined.”:“‘{a}’没有被定义”,针对一些全局变量可以使用/*global Q:true*/申明跳过该检查 （6）‘eval is evil.’:“尽量不要使用eval”, /*jshint -W061 */
另外，使用jshint还需要一个配置文件.hshintrc也放上来供大家参考
{ "asi": true, "browser": true, "node": true, "jquery": true, "esnext": true, "strict": false, "globalstrict": true, "quotmark": true, "undef": true, "unused": true, "scripturl": true, "expr":true, "shadow":true, "-W014": false, "globals": { "define": false, "module": true, "export": true, "console": false, "alert":true, "Q":true } }
csslint也需要一个这样的配置文件，
{ "important": false, "adjoining-classes": false, "known-properties": false, "box-sizing": false, "box-model": false, "overqualified-elements": false, "display-property-grouping": false, "bulletproof-font-face": false, "compatible-vendor-prefixes": false, "regex-selectors": false, "errors": false, "duplicate-background-images": false, "duplicate-properties": false, "empty-rules": false, "selector-max-approaching": false, "gradients": false, "fallback-colors": false, "font-sizes": false, "font-faces": false, "floats": false, "star-property-hack": false, "outline-none": false, "import": false, "ids": false, "underscore-property-hack": false, "rules-count": false, "qualified-headings": false, "selector-max": false, "shorthand": false, "text-indent": false, "unique-headings": false, "universal-selector": false, "unqualified-attributes": false, "vendor-prefix": false, "zero-units": false }
