Grunt——前端自动化构建工具

68 阅读 0 评论 45 点赞

我是靠谱客的博主悲凉星星，最近开发中收集的这篇文章主要介绍Grunt——前端自动化构建工具，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

Grunt和 Grunt 插件是通过 npm 安装并管理的，npm是 Node.js 的包管理器。

Grunt 0.4.x 必须配合Node.js >= 0.8.0版本使用。；奇数版本号的 Node.js 被认为是不稳定的开发版。

在安装 Grunt 前，请确保当前环境中所安装的 npm 已经是最新版本，执行 npm update -g npm 指令进行升级（在某些系统中可能需要 sudo 指令）。

安装：grunt-cli

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:自定义任务

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进入你的项目根目录下

npm install

安装插件，时间很长点

然在根目录下执行

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>