node.js - 了解平均堆栈并集成 uglify.js 和 stylus

Question

我刚刚开始使用 MEAN 堆栈 ( https://github.com/linnovate/mean )，所以我很确定我的问题对于专家来说看起来非常基本，所以我提前道歉!

虽然我认为这将是对该堆栈已经提供的功能的一个很好的补充，但我无法集成 Uglify.js 和 stylus

也有人问过 this ，但对我来说，对服务器和公共(public) View 使用 Jade 模板是有意义的，至少在标准化方面是这样。

我尝试过使用 grunt 文件和 server.js，重命名一些文件，但到目前为止我所能实现的只是破坏原始项目......

提前致谢!

编辑:刚刚找到了这个项目的一个分支，它刚刚添加了对 Jade 模板的支持以供公众查看:https://github.com/tutley/mean

Answer 1

这篇文章解释了如何将 Stylus 预处理集成到 MEAN 堆栈:http://to-s.tk/integrate-stylus-to-the-mean-stack/

简短版本:

• 将 public/css 移动到新的 assets/stylesheets 并将所有 .css 文件重命名为 .styl

• 通过 npm 的 package.json 安装 grunt-contrib-stylus，作为开发和运行时依赖项。

-在 Gruntfile 中配置手写笔编译

// ...
grunt.initConfig({
    // ...
    watch: {
        // ...
        stylus: {
            files: ['assets/stylesheets/**/*.styl'],
            tasks: ['stylus']
        },
        // ...
    },
    // ...
    stylus: {
        compile: {
            options: {
                paths: ['assets/stylesheets/**']
            },
            files: [{
                dest: 'public/css/',
                cwd: 'assets/stylesheets/',
                src: '*.styl',
                ext: '.css',
                expand: true
            }]
        }
    },
    // ...
});
//...
//Load NPM tasks
// ...
grunt.loadNpmTasks('grunt-contrib-stylus');
// ...

• 使用 @require 语句在 common.styl 中导入 View 手写笔文件(或任何子手写笔)

• 删除 head.jade 中对 View 或其他子样式表的引用。

然后，只要 grunt 正在运行，所有 assets/stylesheets/*.styl 文件都应该自动编译为 public/css/*.css。要在不依赖 watch 的情况下触发编译，您可以运行 grunt stylus。