Difference between static content deploy & grunt exec

Question

What's the difference between following commands (Magento 2)

bin/magento setup:static-content:deploy and grunt exec

When should you use which command?

Answer 1

As far as I know, Grunt is a Node Js package, so at the first time to make the Grunt commands can work, we need to install Node Js.

For instance, when run the command: grunt clean:<theme>, Gruntfile.js under Magento root folder is used. Take a look this file:

var _ = require('underscore'),
    path = require('path'),
    themes = require('./dev/tools/grunt/configs/themes'),
    configDir = './dev/tools/grunt/configs',
    taskDir = './dev/tools/grunt/tasks';

[
    taskDir + '/mage-minify',
    taskDir + '/deploy',
    taskDir + '/black-list-generator',
    taskDir + '/clean-black-list',
    taskDir + '/static',
    'time-grunt'
].forEach(function (task) {
    require(task)(grunt);
});

We can see some configs:

1) For our theme config: themes = require('./dev/tools/grunt/configs/themes'), usually uses for grunt watch command.

2) Load config: configDir = './dev/tools/grunt/configs'.

3) Tasks: taskDir = './dev/tools/grunt/tasks'. We have some tasks: deployment, minify, etc.

Refresh themes:

    /**
     * Refresh themes.
     */
    refresh: function () {
        var tasks = [
            'clean',
            'exec:all'
        ];
        _.each(themes, function(theme, name) {
            tasks.push('less:' + name);
        });
        grunt.task.run(tasks);
    },

The refresh function is the most useful function, this function defines some tasks: grunt clean:<theme>, grunt less:<theme> and exec:all

Dig into deployment task: grunt clean:<theme>

The clean config is loaded: dev/tools/grunt/configs/clean.js. And then, the deploy command is executed:

dev/tools/grunt/tasks/deploy.js

    var deploy,
        done = this.async();

    log('Cleaning "pub/static"...');
    exec('rm -rf pub/static/*');
    ok('"pub/static" is empty.');

    log('Deploying Magento application...');
    deploy = spawn('php', ['bin/magento', 'setup:static-content:deploy']);

As we can see, Grunt -grunt clean:<theme>- will execute two commands in order:

--Delete the pub static rm -rf pub/static/

--The static content deploy command: php bin/magento setup:static-content:deploy.

Which one we will choose?

We can deploy static content in both ways, but Grunt is preferred in development mode and static content deploy command in production mode. It also makes sense because we don't need to install Node JS and do more Css style on production environment.

Answer 2

Grunt is a shortcut for magento static deploy. So, grunt exec is much faster, especially if you use 'grunt exec:vendor'. I always use grunt, grunt exec:vendor and grunt less to compile less files.