前端开发Grunt工具的安装使用

时间 2019-11-12

原文原文链接

随着前端开发效果愈来愈丰富，前端的结构也愈来愈复杂，这个时候就须要一个工具来进行管理，能够帮你作语法校验，文件拼接，代码压缩，文件清理等等杂事，Grunt就是这么一个不错的工具。javascript

安装并不复杂，只要先安装nodejs和npm便可，这里介绍Ubuntu上的安装过程，不过Windows平台更加简单，去nodejs的官网下载一个稳定版本安装一下就完事了。css

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来查看版本，注意不要用版本过低的版本，下载了其余库以后容易形成不兼容的问题。经过源上安装的，通常都是最新的稳定版本。html

使用方法这里介绍一下，grunt的配置文件主要包含两个Gruntfile.js和package.json，其中Gruntfile.js就是咱们用来编写执行脚本的文件，package.json则是用来保持项目基本配置信息的文件。经过执行前端

sudo npm init

能够开启一个初始化过程，在过程里能够填写项目的一些基本信息，也能够本身手动建立这个文件java

//文件范例，也能够定义一些自定义的参数，遵循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会自动添加到这个节点。node

经常使用的库包括如下几个：jquery

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的文件结构以下范例express

/*!
 * 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文件压缩，文件拷贝等几个功能。学会使用这几个功能就能够知足大部分的前端打包需求了。npm

另外，针对jshint的校验，常常会碰到的问题及处理方法json

（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
}