grunt watch - use files array format as source

Question

I'm using grunt-contrib-less and grunt-contrib-watch together. My less task uses the files array format to define multiple src and dest's. I'd like to reference those same files from the watch task. Like this:

grunt.initConfig({
  less: {
    build: {
      files: [
        {src: 'src/aa.less', dest: 'dest/a.css'},
        {src: 'src/aa1.less', dest: 'dest/a1.css'}
      ]
    }
  },
  watch: {
    less: {
      files: '<%= less.build.files %>',
      tasks: ['less']
    }
  }
});

That underscore template works, but watch can't process the files array format, it only accepts file input as a string or array of strings. Here's what I've tried:

'<%= less.build.files.src %>' doesn't work because less.build.files is an array, not an object.
'<%= _(less.build.files).pluck("src").value() %>' doesn't work, because even though it makes the right file list, it resolves to single string 'src/aa.less,src/aa1.less', not an array.
'{<%= _(less.build.files).pluck("src") %>}' does work, as suggested here https://stackoverflow.com/a/21608021/490592, but it doesn't feel right. I'm trying to target a specific set of files, not pattern match from my whole project directory.
grunt.config.set('watch.less.files', _(grunt.config.get('less.build.files')).pluck('src').value()); works, but this must be separate from the initConfig.

Is there a more elegant way to accomplish this?

score 3 · Answer 1 · answered Apr 16 '15 at 21:26

I confirmed that grunt-contrib-watch does not support the files array format. I settled on using the grunt-config-set technique I mentioned above.

Even though watch doesn't support the files array format, I make sure my custom tasks are compatible with it so I don't have to use the workarounds from my question. I've attached an example. For read-only tasks, I add a useDest option, so they can be configured to operate on dest's instead of src's. This helps when you want to "pipe" one task into another task.

module.exports = function (grunt) {

  grunt.registerMultiTask('example', 'Example read-only task', function () {
    var options = this.options({
          useDest: false, // When true, operate on dest files, instead of src
        });
        files = this.files.map(function (file) {
          return { src: (options.useDest) ? [file.dest] : file.src }
        });
    files.forEach(function (file) {
      grunt.log.writeln('Source: ' + grunt.log.wordlist(file.src));
    });
  });

  grunt.loadNpmTasks('grunt-contrib-concat');

  grunt.initConfig({
    concat: {
      build: {
        files: [
          { src: 'node_modules/grunt/lib/grunt/*.js', dest: 'lib.js' },
          { src: 'node_modules/grunt/internal-tasks/*.js', dest: 'tasks.js' }
        ]
      }
    },
    example: {
      build: {
        options: {
          useDest: true
        },
        files: '<%= concat.build.files %>'
      }
    }
  });

};

The task will output:

Running "example:build" (example) task
Source: lib.js
Source: tasks.js

score 2 · Accepted Answer · edited May 23 '17 at 12:15

2

I don't understand why you haven't simply refactored the files section into a variable? The following achieves your goal of "like to reference those same files from the watch task."

var yourFiles = [
    {src: 'src/aa.less', dest: 'dest/a.css'},
    {src: 'src/aa1.less', dest: 'dest/a1.css'}
];

grunt.initConfig({
    less: {
        build: {
            files: yourFiles 
        }
    },
    watch: {
        less: {
            files: yourFiles 
            tasks: ['less']
        }
    }
});

P.S. You might enjoy reading up on this to know what happens under the hood when referencing variables in the templates, for some more advanced hacking later on.

edited May 23 '17 at 12:15

Community

1
1

answered Jul 02 '15 at 09:44

oligofren

20,744
16
93
180

1

I think you may have misread the question. The watch task doesn't work with the files array format. – Chad von Nau Jul 03 '15 at 01:24
might have. did not have a set of files to test the config on. – oligofren Jul 06 '15 at 08:36
1

oligofren, I'm accepting your answer belatedly. Someone upvoted my self-answer recently, and in hindsight, yours is a better approach. There's one change necessary, to work around grunt-contrib-watch's incompatibility with the files array format, set the watch files to yourFiles.map(i => i.src) – Chad von Nau Sep 22 '19 at 09:09

grunt watch - use files array format as source

2 Answers2