Add x.min.css & x.min.script to watch

sage
1

I use the watch feature a lot but it doesn’t create the final minified css & scripts in roots v7.

How can i add these tasks to watch?

// Register tasks
  grunt.registerTask('default', [
    'dev'
  ]);
  grunt.registerTask('dev', [
    'jshint',
    'less:dev',
    'autoprefixer:dev',
    'concat'
  ]);
  grunt.registerTask('build', [
    'jshint',
    'less:build',
    'autoprefixer:build',
    'uglify',
    'modernizr',
    'version'
  ]);
2

Actually, Roots 7.0 is configured to have Grunt create minified and unminified assets depending on how you run grunt. Furthermore, depending on your server variables, Roots may not be setup to use the assets you prefer.

Roots 7.0’s new Gruntfile.js specifies two sets of JS/CSS assets for Grunt to build: one set is minified for use on live sites (e.g., main.min.css and scripts.min.js) and a second set is not minified for development and debugging purposes (e.g., main.css and scripts.js). If you define the WP_ENV variable as described a few posts up then Roots will use the unminified assets, otherwise it will use the minified assets.

So it seems you probably have define('WP_ENV', 'development'). View the source of your dev site in one tab and comment out that line and watch what magically happens :wink:

See here and the docs on WP_ENV.

3

thanks your reply cfx. I read up on WP_ENV yesterday and can confirm its not defined anywhere.

I’ve even tried defining it as not ‘development’ to see if that does anything but it doesn’t seem to. (I don’t need to use stage switcher either).

And when you say by default is that basically an alias to dev? grunt dev does build both but i need watch to do so how can i assign dev or default to watch?

4

Ok, didn’t have my coffee before I read your post.

So head over to your Gruntfile.js @ line 132 and add the build tasks:

'less:build', 'autoprefixer:build'

Then jump down to line 139 and add uglify to the js:tasks.

This is my final watch which I verified works:

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

Btw, you can see how WP_ENV works, it’s very simple–either it’s set to development or it defaults. Just check here: https://github.com/roots/roots/blob/master/lib/scripts.php#L22.

I also realized that Grunt’s default behavior is not to generate both minified and unminified assets as I previously stated, so it depends on the parameter you pass to grunt. By default, it’s set to generate only unminified assets:

grunt.registerTask('default', [
  'dev'
]);
3 Likes
5

ah i see - thank makes sense and is all working now.

Thanks!

6

That works for me too. Thank you very much.