使用 Grunt 中特定文件夹的标志来构建答案

【问题标题】：Using a flag for a specific folder in Grunt to build from使用 Grunt 中特定文件夹的标志来构建
【发布时间】：2016-06-17 09:25:31
【问题描述】：

我想现在是否有办法在运行 Grunt 时从某个文件夹加载某些文件。

假设我有一个如下所示的文件夹结构：

[html]
[css]
[js]
[custom]
    [X] x.css
    [Y] y.css
    [Z] z.css

我正在尝试为客户 [X] 构建我的网站，需要将一些自定义 css 添加到他们的 x.css 文件中，然后加载该文件进行测试。

我想做的是运行我的 grunt 任务（现在它运行 sass、jsx 编译器并使用 livereload 启动一个 localhost 服务器）并说 grunt client-x。

然后它将加载我的 x.css 文件和该文件夹的所有内容，但根本不使用触摸 [Y] 和 [Z] 文件夹。

任务运行器可以做到这一点吗？

【问题讨论】：

Grunt dynamic dest location sass的可能重复
Grunt less 是多任务，可以指定多个源组和目标组
@EmanueleParisio 您的回答对我自己找到解决方案非常有帮助，但最后我选择了不同的设置。但是非常感谢！

标签： gruntjs compiler-flags

【解决方案1】：

所以我查看了Grunt dynamic dest location sass，它最初似乎解决了我的问题，但我无法真正让它按照我想要的方式工作，而且它混淆了我已经设置的现有繁琐任务。

但后来我找到了grunt options——这个参数解决了我所有的问题。 Grunt 文件如下：

module.exports = function(grunt) {

          var theme = grunt.option('theme')

          grunt.initConfig({
              concat: {
                  options: {
                      separator: 'rn'
                  },
                  dist: {
                    files: {
                        'js/script.js': 'themes/' + theme + '/js/custom.js'
                    }
                  }
              },
              watch: {
                  sass: {
                    files: ['themes/' + theme + '/**/*.{scss,sass}', 'themes/' + theme + '/_partials/**/*.{scss,sass}', 'sass/**/*.{scss,sass}', 'sass/_partials/**/*.{scss,sass}', 'themes/' + theme + '/js/custom.js'],
                    tasks: ['sass:dist', 'shell:upload', 'concat:dist'],
                    options: {
                      livereload: true,
                    },
                  },
                  livereload: {
                    files: ['*.vm', 'js/*.{js,json}', 'css/*.css','images/*.{png,jpg,jpeg,gif,webp,svg}', 'themes/' + theme + '/js/custom.js'],
                    options: {
                        livereload: true,
                        debounceDelay: 2000
                    }
                  }
              },
              sass: {
                options: {
                    sourceMap: true,
                    outputStyle: 'nested'
                },
                dist: {
                    files: {
                        'css/lyria.css': 'themes/' + theme + '/styles.scss'
                    }
                }
              },
              shell: {
                options: {
                  stdout: true,
                  stderr: true
                },
                upload: {
                  command: './theme-uploader.sh'
                }
              },
            })

            grunt.loadNpmTasks('grunt-contrib-concat');
            grunt.loadNpmTasks('grunt-contrib-watch');
            grunt.loadNpmTasks('grunt-sass');
            grunt.loadNpmTasks('grunt-shell');

            grunt.registerTask('default', [
                'sass:dist',
                'concat',
                'shell:upload',
                'watch'
            ]);

        };

如您所见，主题参数用作 grunt 默认任务的参数，然后将正确的文件编译到正确的位置。当我运行 grunt --theme=x 时，它会监视并编译该特定目录中由我的不同任务设置的相应文件夹。

此设置的原因是我正在为同一存储库中的不同客户端开发和维护不同的子主题。我需要能够使用其相应的样式表和自定义 js 生成客户端特定的 jar。

这样我可以将所有目录保存在同一个 repo 中，并在运行我的 grunt 任务时指定从哪个客户端文件夹获取 css。

【讨论】：