8

如何在我的 Node.js 项目中自动执行编译 Twitter Bootstrap 的任务？

我正在为我的 Node.js 项目编辑编译成 Bootstrap 自定义构建的 LESS 文件，因此我不能只使用在线定制器或预编译的 JavaScript/CSS 分发。

如何使用 Grunt 或 Bower 之类的工具来自动化构建 Twitter Bootstrap 前端框架并将其从源代码编译到我的项目中的过程？

有前端库和框架的包管理器吗？

4

3 回答 3

13

我正在使用 Grunt 来编译我的 LESS。以下是您必须添加到 package.json 的依赖项：

"devDependencies": {
    "grunt": "0.4.1",
    "grunt-contrib-concat": "0.3.0",
    "grunt-contrib-watch": "0.4.4",
    "assemble-less": "0.4.8"
}

这是我的 Gruntfile.js 的样子：

module.exports = function(grunt) {

    grunt.initConfig({
        less: {
            project: {
                options: {
                    paths: ['src/css/less'],
                    yuicompress: true
                },
                src: ['src/css/less/index.less'],               
                dest: 'src/css/styles.css'
            }
        },
        watch: {
            css: {
                files: ['src/css/less/**/*.less'],
                tasks: ['less']
            }
        }
    });

    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('assemble-less');

    // grunt.registerTask('default', ['concat', 'less']);
    grunt.registerTask('default', ['less', 'watch']);

}

我只需在开始工作之前输入grunt 。一旦发生变化，它就会运行一个观察程序并编译我的 less 文件。

编辑：还有https://github.com/emberfeather/less.js-middleware但您需要将编译添加到应用程序的流程中。这意味着您将在 nodejs 进程运行期间编译较少的文件。这只会发生一次，如果您对某些文件进行更改，您将看不到结果。当然，您可能希望针对每个请求进行编译，但这会降低您的应用程序的性能。所以，你最终会得到某种观察者和编译器。正是 Grunt 正在做的事情。如果您不想每次都运行grunt ，您可以将其添加到您的启动脚本（或 windows 下的启动项）中。

于 2013-09-10T21:07:39.727 回答
2

根据您的安排，您可能只想查看less-middleware。它会在开发中即时将您的 LESS 编译成 CSS，而在生产中会在第一次请求 CSS 时执行此操作，然后提供 CSS 而不是每次都重新编译它。包含的链接中有大量配置示例。

于 2013-09-18T02:58:54.127 回答
0

我手头没有 grunt-bootstrap 的设置，并且 npmjs 由于某种原因现在处于脱机状态，请尝试此链接以获取设置https://npmjs.org/package/grunt-bootstrap

我像这样使用最新版本的 grunt-bootstrap 和 grunt-contrib-less；

包.json

"devDependencies": {
"grunt": "~0.4.2",
"grunt-cli": "~0.1.11",
"grunt-bootstrap": "~0.1.0",
"grunt-contrib-jade": "~0.8.0",
"grunt-contrib-less": "~0.8.2",
"grunt-contrib-jshint": "~0.7.2",
"grunt-contrib-uglify": "~0.2.7",
"grunt-contrib-watch": "~0.5.3"
//others here

}

Gruntfile.JS 更少：条目 

module.exports = function(grunt) {

    // Project configuration.
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        jshint: {
            options: {
                curly: true,
                eqeqeq: true,
                immed: true,
                latedef: true,
                newcap: true,
                noarg: true,
                sub: true,
                undef: true,
                boss: true,
                eqnull: true,
                browser: true,
                globals: {
                    require: true,
                    define: true,
                    requirejs: true,
                    describe: true,
                    expect: true,
                    it: true
                },

                // https://leanpub.com/grunt/read #see 'module' is not defined
                node: true
            },
            // https://leanpub.com/grunt/read #see 'module' is not defined
            all: [
                'Gruntfile.js',
                'src/app/*.js',
                'src/config.js',
                'tests/app/*.js'
            ]
        },
        uglify: {
            options: {
                banner: '*//*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> *//*\n'
            },
            build: {
                src: 'src/app/<%= pkg.name %>.js',
                dest: 'build/app/<%= pkg.name %>.min.js'
            }
        },

        // Run jshint any time a file is added
        watch: {
            scripts: {
                files: [
                    'Gruntfile.js',
                    'src/app/*.js',
                    'tests/app/*.js'
                ],
                tasks: ['jshint'],
                options: {
                    /**
                     * If you need to dynamically modify your config, the spawn option must be disabled to keep the watch
                     * running under the same context.
                     */
                    spawn: false
                }
            },
            css: {
                files: ['src/assets/css/*.less'],
                tasks: ['less']
            }
        },
        less: {
            development: {
                options: {
                    paths: ["src/assets/css"],
                    compress: true,
                    report: 'gzip',
                    cleancss: true,
                    ieCompat: true,
                    strictImports: true
                    //dumpLineNumbers
                },
                files: [{
                    expand: true,
                    cwd: "src/assets/css",
                    src:  ['*.less'],
                    dest: 'build/assets/css',
                    ext: '.css'
                }]
            }
            /*
            production: {
                options: {
                    cleancss: true
                },
                files: {
                }

            }*/
        },
        jade: {
            compile: {
                options: {
                    //client: false,
                    pretty: true,
                    data: {
                        debug: false
                    }
                },
                files: [ {
                    cwd: "src/app/views",
                    src: "**/*.jade",
                    dest: "build/templates",
                    expand: true,
                    ext: ".html"
                } ]
            }
        }
    });

    // Load task(s)
    grunt.loadNpmTasks('grunt-contrib-less');
    grunt.loadNpmTasks('grunt-contrib-jade');
    grunt.loadNpmTasks('grunt-bootstrap');
    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-watch');

    // Register task(s).
    grunt.registerTask('default', [
            'jshint',
            'uglify',
            'less',
            'jade',
            'bootstrap'
        ]);

    grunt.registerTask('dev', [
            'watch'
    ]);
};

编辑：我再次发现了这个，https://github.com/jgallen23/grunt-bootstrap 我知道它在某个地方。您可能正在寻找一些引导配置选项，您需要将其添加到 gruntfile.js 以完成您的任务。享受

于 2013-11-28T09:22:35.910 回答