坛子里用过 Yeoman 和 Grunt 的 Nodejs 兄弟, 求给些指导

坛子里用过 Yeoman 和 Grunt 的 Nodejs 兄弟, 求给些指导

我现在编译 coffee stylus jade 文件时候觉得有用这类工具的需要 以前是用 Shell 脚本, 后来把 Shell 脚本放在 cake 里调用, 感觉都不大方便 所以打算尝试 grunt 之类工具, 既然支持 coffee 问题应该不大 然后 Yeoman Grunt 工具这些不止一个, Yeoman 能不能用的, 够不够强? Grunt 又说安装时候有 grunt 和 grunt-cli 两个不一样的包, 要装一个还是两个? 我看 grunt.js 文件好长, 能不能自动生成的? 英文官网文档我正在看, 有没有靠谱的中文文档?


6 回复

当然可以。以下是对您提出的问题的回答：

使用 Yeoman 和 Grunt

1. 为什么选择 Yeoman 和 Grunt？

Yeoman 是一个强大的脚手架工具，可以帮助你快速搭建项目结构。它集成了 Grunt（或 Gulp）作为任务运行器，以及 Bower 作为前端库管理工具。使用 Yeoman，你可以生成预定义的项目模板，这样你就不用手动创建项目结构和配置文件。

2. 安装 Yeoman 和 Grunt

首先，你需要全局安装 yo、grunt-cli 和 bower：

npm install -g yo grunt-cli bower

3. 安装和配置 Grunt

Grunt 和 Grunt CLI 是两个不同的包。grunt 包是用于运行具体的任务，而 grunt-cli 是用于在全局环境中调用 Grunt。因此，你应该同时安装这两个包。

npm install grunt --save-dev
npm install grunt-cli --global

4. 自动生成 Gruntfile.js

Gruntfile.js 是 Grunt 的配置文件，通常包含了一系列的任务定义。你可以通过运行 yo 命令来自动生成 Gruntfile.js 文件。例如，如果你使用 Yeoman 的 webapp generator，可以运行：

yo webapp

这会创建一个包含 Gruntfile.js 的项目，并且该文件已经配置好了默认的任务。

5. 示例配置

以下是一个简单的 Gruntfile.js 示例，用于编译 CoffeeScript、Stylus 和 Jade 文件：

module.exports = function(grunt) {
    // 加载插件
    grunt.loadNpmTasks('grunt-contrib-coffee');
    grunt.loadNpmTasks('grunt-contrib-stylus');
    grunt.loadNpmTasks('grunt-contrib-jade');

    // 配置任务
    grunt.initConfig({
        coffee: {
            compile: {
                expand: true,
                cwd: 'src/coffee/',
                src: ['**/*.coffee'],
                dest: 'dist/js/',
                ext: '.js'
            }
        },
        stylus: {
            compile: {
                options: {
                    compress: true
                },
                files: {
                    'dist/css/style.css': 'src/stylus/style.styl'
                }
            }
        },
        jade: {
            compile: {
                options: {
                    pretty: true
                },
                files: {
                    'dist/html/index.html': 'src/jade/index.jade'
                }
            }
        }
    });

    // 默认任务
    grunt.registerTask('default', ['coffee', 'stylus', 'jade']);
};

6. 中文文档

关于 Grunt 的中文文档，你可以参考 gruntjs.com.cn。虽然官方文档主要是英文的，但这个网站提供了较为详细的中文翻译。

希望这些信息对你有所帮助！


grunt v0.4要求用grunt-cli，只是一个wrapper，真正的grunt通过npm装。

yo可以自动生成一个gruntfile.js

看到一个 repo, 上边放了一些教程, 终于摸出点头绪来 https://github.com/Takazudo/gruntExamples 终于搞定了几种代码的自动编译… https://github.com/jiyinyiyong/rich-indentations/blob/gh-pages/Gruntfile.coffee 不过 grunt-reload 试了一个晚上都没有成功, 邪门了的

http://brunch.io/ Brunch写了一个watch,支持各种格式的compiler作为插件 https://github.com/brunch/brunch/wiki/Plugins 选几个放到其 package.json 的dependencies里npm install一下 然后watch就会同步编译压缩到public目录

我之前还以为 Brunch 只是另一个项目模板之类的工具… 但看起来插件数量相比 Grunt 不在一个数量级

当然可以。你提到的几个工具都是前端开发中非常常用的工具，它们可以帮助你更高效地进行项目管理和文件编译。

Yeoman 和 Grunt

Yeoman 是一个脚手架工具，可以帮助你快速搭建项目结构。Grunt 则是一个任务运行器，它可以帮助你自动化各种常见的前端开发任务，如编译、压缩、测试等。

安装和使用

首先，你需要安装 Node.js 和 npm（Node.js的包管理器）。接下来，你可以安装 grunt 和 grunt-cli：

npm install -g grunt-cli

这里安装的是 grunt-cli，这是一个全局的命令行接口，用于在项目中运行特定版本的 grunt。接着，在你的项目中安装具体的 grunt 版本：

npm install --save-dev grunt

自动化任务配置

你可以通过创建 Gruntfile.js 文件来自定义自动化任务。以下是一个简单的例子，展示了如何配置 Grunt 来处理 CoffeeScript、Stylus 和 Jade 文件：

module.exports = function(grunt) {
    // 加载所需的插件
    require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);

    // 配置任务
    grunt.initConfig({
        coffee: {
            compile: {
                files: {
                    'dest/script.js': ['src/*.coffee']
                }
            }
        },
        stylus: {
            compile: {
                options: {
                    compress: true
                },
                files: {
                    'dest/style.css': ['src/*.styl']
                }
            }
        },
        jade: {
            compile: {
                options: {
                    pretty: true
                },
                files: {
                    'dest/index.html': ['src/*.jade']
                }
            }
        }
    });

    // 默认任务
    grunt.registerTask('default', ['coffee', 'stylus', 'jade']);
};

文档

  • 官方文档：Grunt 的官方文档是英文的，但非常详细，适合有一定基础的开发者。
  • 中文资源：虽然官方文档是英文的，但网上有很多社区和博客提供了详细的教程和案例分析，比如掘金、CSDN 等平台上有不少关于 Grunt 和 Yeoman 的中文教程。

希望这些建议对你有所帮助！

回到顶部