Question

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

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

我应该从哪里开始？

Answer 1

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

要使用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"
    }
}

现在你要把你的凉亭插上咕噜声，你需要一个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": "*"
    }
}

现在您只需要运行这些命令，就可以在公共文件夹中找到引导程序。

npm install
grunt

请访问grunt和grunt shell以了解更多相关内容，它们非常棒。

如何使用Grunt构建Twitter Bootstrap 3

1 个答案: