6

The vanilla checkout of Magento2 contains a Grunt boilerplate including the autoprefixer task. It works all sweet and dandy (according to our frontend devs).

However now as I need to make the whole application working in deployment, we're not using Grunt but the the given Magento bin command with the setup:static-content:deploy action (php -f bin/magento -- setup:static-content:deploy).

But there somehow the autoprefixer looks lost. Now I'm puzzled which configuration point I was missing or is it so that the Grunt example is not-so-related to actual bare work that has to be done shipping the Magento2 application?

0

Grunt is essential for frontend development and speeds up the dev process and yes you won't be using it in production. Magento commands (initialised from bin/magento) should work alongside your Grunt setup, they're completely independent of each other.

In development you can basically run both bin/magento setup:static-content:deploy and grunt exec: one after another and both should work. If your Magento commands are not executing you need to look into whether it was installed and setup correctly, execute the blow command and see if it helps

chmod u+x bin/magento

If still experiencing issues, you can look into file ownership etc best source is DevDocs http://devdocs.magento.com/guides/v2.1/config-guide/prod/prod_file-sys-perms.html

  • Can you confirm that bin/magento setup:static-content:deploy completely lacks the autofixer that grunt has preconfigured? – hakre Dec 14 '16 at 14:16
  • From what I understand, autoprefixer is only used by Grunt and has no bearing on Magento commands. If I disable/uninstall autoprefixer (which is a node module) my Grunt complaints but bin/magento commands work as normal. 99.9% sure it's not required by Magento core commands. – Devtype Dec 14 '16 at 15:20
0

We experienced some minor differences between the grunt workflow and just using static content deploy. To ensure deployment creates the same result as development and we changed the prod function in the gruntfile:

    /**
     * Production preparation task.
     */
    prod: function (component) {
        var tasks = [
            'less',
            'autoprefixer',
            'cssmin',
            'usebanner'
        ].map(function(task){
            return task + ':' + component;
        });

        if (typeof component === 'undefined') {
            _.each(themes, function(theme, name) {
                tasks = [
                    'less',
                    'autoprefixer',
                    'cssmin',
                    'usebanner'
                ].map(function(task){
                    return task + ':' + name;
                });
                grunt.task.run(tasks);
            });
        } else {
            grunt.task.run(tasks);
        }
    }

This also includes the autoprexer and cssmin. You will need to create .js files for these however and use combo.js to get all your css files. We added a 'cssFiles' function in there. By default it only contains a 'lessFiles' function. It was not all that hard.

cssFiles: function (themeName) {
    var cssStringArray = [],
        cssFiles = {},
        i = 0;

    for (i; i < theme[themeName].files.length; i++) {
        cssStringArray[i] = path.pub +
        theme[themeName].area + '/' +
        theme[themeName].name + '/' +
        theme[themeName].locale + '/' +
        theme[themeName].files[i] + '.css';

        cssFiles[cssStringArray[i]] = cssStringArray[i];
    }

    return cssFiles;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.