Question

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

我们说我的文件夹结构如下所示：

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

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

我希望能够做的是运行我的grunt任务（现在它运行sass，jsx编译器并使用livereload旋转本地主机服务器）并说出grunt client-x。

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

这可以通过任务运行器吗？

Answer 1

所以我看了Grunt dynamic dest location sass这似乎最初解决了我的问题，但是我无法按照我想要的方式工作，并且混淆了我已经设置的现有grunt任务。

但后来我发现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'
            ]);

        };

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

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

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

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

1 个答案: