前端開發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
}