Using a flag for a specific folder in Grunt to build from

Question

I would like to now if there is a way to load certain files from a certain folder when running Grunt.

Let's say I have a folder structure that looks like this:

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

I'm trying to build my website for client [X] and need to add some custom css to their x.css file and just load that one to test.

What I would love to be able to do is run my grunt task (right now it runs sass, jsx compiler and spins up a localhost server with livereload) and say grunt client-x.

Which then would load my x.css file and all content of that folder but not use touch the [Y] and [Z] folder at all.

Is this possible with a task runner?

Answer 1

So I looked at Grunt dynamic dest location sass which seemed to solve my problem initially but I couldn't really get it to work the way I wanted to and it muddled up my existing grunt tasks I had already set up.

But then I found grunt options - this parameter solved all my problems. Grunt file below:

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'
            ]);

        };

As you can see the theme parameter is used as a argument for the grunt default task which then compiles the correct files to the correct place. When I run grunt --theme=x it watches and compiles the corresponding folders in that specific directory as set up by my different tasks.

The reason for this setup is that I'm developing and maintaining different child themes for different clients in the same repository. I need to be able to generate a client specific jar with their corresponding stylesheets and custom js.

This way I get to keep all my directories in the same repo and just specify when running my grunt task which client folder to get the css from.