Grunt——前端自動化構建工具

時間 2019-11-26

原文原文鏈接

Grunt和 Grunt 插件是經過 npm 安裝並管理的，npm是 Node.js 的包管理器。css

Grunt 0.4.x 必須配合Node.js >= 0.8.0版本使用。；奇數版本號的 Node.js 被認爲是不穩定的開發版。html

在安裝 Grunt 前，請確保當前環境中所安裝的 npm 已是最新版本，執行 npm update -g npm 指令進行升級（在某些系統中可能須要 sudo 指令）。node

安裝：grunt-cligit

npm install -g grunt-cli

在使用Grunt時，請先看看官網，先建立兩個文件
package.json:配製插件，等其餘參數

{
    "name": "WebApp",
    "version": "0.1.0",//這個請注意格式，防止出現'0.1’,'1',這些值會出現莫名錯誤 "repository": {
        "type": "git",
        "url": "git://github.com/gruntjs/grunt.git"
    },
    "devDependencies": {
        "grunt": "~0.4.5",
        "grunt-contrib-clean": "~0.6.0",
        "grunt-contrib-coffee": "~0.12.0",
        "grunt-contrib-compass": "~1.0.3",
        "grunt-contrib-concat": "~0.5.1",
        "grunt-contrib-cssmin": "~0.12.2",
        "grunt-contrib-csslint": "~0.4.0",
        "grunt-contrib-htmlmin": "~0.4.0",
        "grunt-contrib-imagemin": "~0.9.4",
        "grunt-contrib-uglify": "~0.9.1",
        "grunt-contrib-jshint": "~0.11.2",
        "grunt-contrib-watch": "~0.6.1",
        "grunt-contrib-requirejs": "~0.4.4",
        "grunt-usemin": "~3.0.0",
        "grunt-filerev": "~2.3.1",
        "grunt-contrib-copy": "~0.8.0"
    }
}

Gruntfile.js:自定義任務github

module.exports = function (grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        useminPrepare: {
            html: 'app/index.html'
        },
        concat: {
            js: {
                dest: 'tmp/concat/app.js',
                src: [
                  'app/js/app.js',
                  'app/js/index.js',
                  'app/js/thing-model.js',
                  'app/js/thing-view.js'
                ]
            }
        },
        uglify: {
            js: {
                dest: 'tmp/uglify/app.js',
                src: ['tmp/concat/app.js']
            }
        },
        filerev: {
            js: {
                dest: 'filerev/js',
                src: ['app/js/*.js', 'tmp/uglify/*.js']
            },
            scc: {
                dest: 'filerev/css',
                src: ['app/css/*.css']
            }
        },
        usemin: {
            html: 'app/index.html',
            options: {
                assetsDirs: ['tmp/uglify', '']//這個值請注意，當執行時不能正常替換靜態資源引用時，就是他在做怪
            }
        }
    });
    grunt.loadNpmTasks('grunt-contrib-copy');//註冊插件，必需
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-filerev');
    grunt.loadNpmTasks('grunt-usemin');
    grunt.loadNpmTasks('grunt-contrib-clean');
//默認任務順序
    grunt.registerTask('default', [
        'useminPrepare',
        'concat',
        'uglify',
        'filerev',
        'usemin'
    ]);
};

配製成功後cmd進入你的項目根目錄下shell

npm installnpm

安裝插件，時間很長點json

然在根目錄下執行app

grunt grunt

執行默認任務

demo:

<!DOCTYPE html>
<html>
<head>
    <meta content="width =device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
    <title>Title</title>
    <!-- build:js /tmp/uglify/app.js-->
    <script src="/app/js/app.js"></script>
    <script src="/app/js/index.js"></script>
    <script src="/app/js/thing-model.js"></script>
    <script src="/app/js/thing-view.js"></script>
    <!-- endbuild -->
    <script src="/app/js/app.js"></script>
    <script src="/app/js/index.js"></script>
    <script src="/app/js/thing-model.js"></script>
    <script src="/app/js/thing-view.js"></script>
    <link href="/app/css/index.css" rel="stylesheet" />
</head>
<body>
    <!--{"app\\js\\app.js":"filerev\\js\\app.bc7ed700.js",
    "app\\js\\index.js":"filerev\\js\\index.7f1f0127.js",
    "app\\js\\thing-controller.js":"filerev\\js\\thing-controller.7f1f0127.js",
    "app\\js\\thing-model.js":"filerev\\js\\thing-model.a74d0e62.js",
    "app\\js\\thing-view.js":"filerev\\js\\thing-view.d80fca0d.js"}-->
    <p>this is a grunt usemin</p>
    <img src="image.png" />
</body>
</html>

body中的註釋內容爲

grunt-filerev插件的map,grunt-usemin就是使用他來替換引用

替換引用後得：

<!DOCTYPE html>
<html>
<head>
    <meta content="width =device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
    <title>Title</title>
    <script src="/tmp/uglify/app.6bdcf715.js"></script>
    <script src="/app/js/app.bc7ed700.js"></script>
    <script src="/app/js/index.7f1f0127.js"></script>
    <script src="/app/js/thing-model.a74d0e62.js"></script>
    <script src="/app/js/thing-view.d80fca0d.js"></script>
    <link href="/app/css/index.704e3ff7.css" rel="stylesheet" />
</head>
<body>
    <!--{"app\\js\\app.js":"filerev\\js\\app.bc7ed700.js",
    "app\\js\\index.js":"filerev\\js\\index.7f1f0127.js",
    "app\\js\\thing-controller.js":"filerev\\js\\thing-controller.7f1f0127.js",
    "app\\js\\thing-model.js":"filerev\\js\\thing-model.a74d0e62.js",
    "app\\js\\thing-view.js":"filerev\\js\\thing-view.d80fca0d.js"}-->
    <p>this is a grunt usemin</p>
    <img src="image.png" />
</body>
</html>