Understanding new grunt watch/dev/build in v7.0

sage
1

I’ve installed the latest version of Roots for a new project and I’m trying to wrap my head around these new Grunt commands.

Before I would just write grunt watch in the terminal and whenever I saved my changes to the .less files it would compile the main.min.css and those changes would be reflected in the browser.

Now with Roots 7.0 when I use grunt watch it creates the main.css but the page still wants to load the minified version from the grunt build.

So basically whats the difference, in the simplest terms, between grunt watch/dev/build? Iss there a way for me to set it up the gruntfile so that I can just write grunt watch once and the main.min.css will be made every time I make a change?

I don’t want to make any unnecessary changes if the current set up is the best way.

2

You need to add define('WP_ENV', 'development'); to your wp-config.php, while developing, so your Roots won’t look for the minified version.

  • grunt dev basically will do all the work but* minifying;
  • grunt watch will run grunt dev when something is modified;
  • grunt build will do all the work + minify, so you can send your project to your production server.

The process as I understand:

  1. Add define('WP_ENV', 'development'); to wp-config.php;
  2. Work on your project with grunt watch;
  3. Finishes the project -> runs grunt build;
  4. Send the project to production server (where the WP_ENV won’t be “development”).

http://discourse.roots.io/t/how-to-correctly-add-bxslider-to-my-theme/1952/12?u=heitorss

1 Like
3

Cool, thanks for your help. I had added define('WP_ENV', 'development'); before making this post but it still wasn’t working. I then set up the grunt file like this, which I found in another thread:

watch: {
      less: {
        files: [
          'assets/less/*.less',
          'assets/less/**/*.less',
        ],
        //tasks: ['less:dev', 'autoprefixer:dev']
        tasks: ['less:dev', 'autoprefixer:dev', 'less:build', 'autoprefixer:build']
      },
      js: {
        files: [
          jsFileList,
          '<%= jshint.all %>'
        ],
        //tasks: ['jshint', 'concat']
        tasks: ['jshint', 'concat', 'uglify']
      },

I just changed it back to the default settings (where it was commented out) and grunt watch seems to be working fine now.

Perhaps it was a problem with adding define(‘WP_ENV’, ‘development’); after activating the theme? Cheers!

5

Nobody can help with general confusion. If there is something specific you’re still confused about after reading the posts above then I can try to clear up your confusion.

6

I think my confusion is mostly about Grunt and not about Roots at all. You are right, nobody can help with general confusion.
In other way, maybe Gulp is less confusing. I don’t know.

Cheers. :wink:

7

If it’s something specific about how Roots employs Grunt then ask away. If it’s general confusion about Grunt then check out the Grunt docs.

8

When I write grunt dev in terminal Grunt creates style and script file
When I write grunt build Grunt creates the min version.

When I write both commands in terminal I have production and development version of the files. My confusion was about that because some scripts were loaded twice, also when I did git status Git give me untracked files. And manually I have to delete dev version of css/script in order to make a push for the production files.

9

@cfx is WP_ENV specific to roots? That isn’t really clearly explained anywhere that I can see. I don’t think its unreasonable that one might assume this is a WordPress constant used by core but a search of core reveals that isn’t the case.

How would I get this added to the roots docs? i.e. contribute something and do it myself?

10

It is specific to Roots and it’s being removed when Roots switches to gulp.