CODEWITHSUNDEEP
javascriptsassgruntjs
Gigi Ionel
Gigi Ionel

Reputation: 248

Grunt watch for tasks instead for files?

I`m new to Grunt and I saw a few tutorials about watch plugin. The example:

watch:{
 sass:{
  files: 'sass/*.scss',
  tasks: ['sass','cssmin']
 }
}

My question is why do I need to watch about another plungin like "sass" instead of watching the actual file(s) 'sass/*.scss'?

I don`t understand, it is not logical to watch a plugin/task, rather than a file.

Why I can`t call like this:

watch:{
      files: 'sass/*.scss',
      tasks: ['sass','cssmin']
    }

?

And what if I want to also watch about my js file? Do I need to put it also in the files of the sass tasks? It does not make sense to have js files into sass task...

Upvotes: 1

Views: 42

Answers (3)

xyz
xyz

Reputation: 3409

You're by no means watching a plugin. Suppose you have another plugin less, which you want to work on a different set of files. How will you do it?

watch {
    sass: ...

    less: ...

    uglify: ...
}

Even if you put js files with sass (ignoring that it is horrible practice), when grunt calls sass on that file, nothing will happen.

As an example

module.exports = function (grunt) {

    grunt.initConfig({

        jshint: {
            // ...
        },

        uglify: {
            // ...
        },

        sass: {
            // ...
        },

        foo: {
            // ...
        },

        watch: {
            javascript: {
                files: 'javascripts/*/**.js',
                tasks: ['jshint', 'uglify']
            },
            sass: {
                files: 'sass/*/**.scss',
                tasks: ['sass', 'foo']
            }
        }

    });

    // ...

};

There are different watchers for js, like uglify.

Upvotes: 1

user4999841
user4999841

Reputation:

The watch plugin watches files matching the pattern specified by files section. Whenever any of the matching files are changed, the tasks mentioned in tasks is executed.

For example, let us consider the watch task in your question

watch:{
    sass:{
        files: 'sass/*.scss',
        tasks: ['sass','cssmin']
    }
}

Here, sass is just a name given to the operation. It can be anything; but since the operation compiles Saas files, the operation is named saas.

Whenever any scss file in sass directory is changed, the operation saas is triggered, executing the saas and cssmin tasks, which should be defined earlier.

References:

Upvotes: 1

whatoncewaslost
whatoncewaslost

Reputation: 2256

It's not that you're "watching" that plugin, it's that you're watching a set of files and running tasks when the files changes. the tasks specification is where you specify what tasks you need. So in this case you would run the sass and cssmin tasks.

Upvotes: 1

Related Questions