less - 在 yeoman 中集成 less 的最佳或最简单方法？

Question

我正在尝试yeoman。

我想减少集成到我的 yeoman 或 grunt 构建中。但我还没有找到简单的方法来做到这一点。

我确实找到了指向grunt-contrib-less 的yeoman-less存储库。但是，如果您是 yeoman 和 grunt 的新手，那么该插件很难插入。没有更简单的方法可以将 less 插入到我的 yeoman webapp 中，以便将 less 命令自动添加到 grunt 构建文件中吗？

感谢您的提示和技巧！

Answer 1

假设您使用 来搭建一个新应用程序yo webapp并回答这两个问题No，那么集成 LESS 的最佳选择是您需要先安装的grunt-recess ：

npm install --save-dev grunt-recess

如果您不喜欢 linting 规则，可以自定义它们。随意卸载grunt-compass并将其从package.json.

然后，您需要将compassGruntfile 中的任务替换为：

    recess: {
        options: {
            compile: true
        },
        dist: {
            files: [{
                expand: true,
                cwd: '<%= yeoman.app %>/styles',
                src: '{,*/}*.less',
                dest: '.tmp/styles/',
                ext: '.css'
            }]
        }
    }

然后您需要用 替换所有剩余的对该compass任务的引用recess，以便生成的 Gruntfile 看起来像这样。

Answer 2

这是一个老问题，但我一直在寻找它。因此，这是一个最新的答案：

使用 Yeoman 的“LessApp”生成器，可在此处找到： https ://github.com/robinpokorny/generator-lessapp

Answer 3

如果您收到以下错误， Expected recessto have an identation at 9 而不是 10.

请添加recces 到您的grunt.registerTask，我已将我的放在autoprefixer

grunt.registerTask('serve', function (target) {
    if (target === 'dist') {
        return grunt.task.run(['build', 'connect:dist:keepalive']);
    }

    grunt.task.run([
        'clean:server',
        'concurrent:server',
        'autoprefixer',
        'recess',
        'connect:livereload',
        'watch'
    ]);
});