twitter-bootstrap-3 - 如何使用 Grunt 构建 Twitter Bootstrap 3

Question

我使用 git clone https://github.com/twbs/bootstrap.git 克隆了 Twitter Bootstrap 3 :

现在，我正在尝试使用 Grunt 构建它，但我找不到任何关于如何执行此操作的文档。

我应该从哪里开始？

Answer 1

要为您的项目添加更多自动化，我建议您使用 Bower 。这甚至可以节省您将所有内容下载到您的 Assets 的时间。

为了使用 Bower，您需要 bower.json

这个文件看起来像这样:

{
    "name": "WebExpressive",
    "version": "0.0.0",
    "authors": [
        "username <username@abc.com>"
    ],
    "description": "An awesome web application",
    "license": "MIT",
    "ignore": [],
    "dependencies": {
        "bootstrap": "latest",
        "jQuery": "latest",
        "angular-latest": "latest",
        "turnjs": "latest"
    }
}

现在你要插入你的 bower 来 grunt 你需要有一个 Gruntfile.js 看起来像这样

module.exports = function (grunt) {
    //project configuration
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        shell: {
            multiple: {
                command: ['bower install',
                    'mv bower_components/** public/',
                    'rm -rf bower_components'].join('&&')
            }
        }
    });

    grunt.loadNpmTasks('grunt-shell');

    //Default Tasks
    grunt.registerTask('default', ['shell']);

    //production Tasks
    //grunt.registerTask('dist',[..]);

    //test tasks
};

现在，在您实际运行 'grunt' 之前，请确保您的项目目录中包含所有 npm 包并且 package.json 的格式正确。

看看我的 package.json 文件。

{
    "name": "application-name",
    "version": "0.0.1",
    "private": true,
    "scripts": {
        "start": "node app.js"
    },
    "dependencies": {
        "grunt": "*",
        "grunt-shell": "*",
        "grunt-contrib-uglify": "*",
        "grunt-contrib-connect": "*",
        "grunt-contrib-coffee": "*",
        "grunt-contrib-compass": "*",
        "grunt-open": "*",
        "grunt-contrib-requirejs": "*",
        "grunt-contrib-jade": "*",
        "grunt-contrib-copy": "*",
        "grunt-bower-install": "*"
    }
}

现在你只需要运行这些命令，你就可以在公用文件夹中找到你的 Bootstrap 。

npm install
grunt

请访问grunt和 grunt shell要对此进行更多探索，它们非常棒。