Gruntfile.js watch

So I’m making my own WordPress Framework, and am utilizing grunt and sass. I’m newer at grunt and sass, but experienced enough with grunt to kind of know what I’m doing, but I’ve used LESS in the past and not Sass.

I’m taking the Gruntfile.js file from roots.io as a starting point. Everything I have is correct as far as I know, but I’m not too sure about a couple of things. I removed the js stuff because I’m not going to be watching for it, and I added grunt-contrib-sass.

Read More

When running grunt watch I get this error:

 grunt watch

/Gruntfile.js:22
        watch: {
        ^^^^^
Loading "Gruntfile.js" tasks...ERROR
>> SyntaxError: Unexpected identifier
Warning: Task "watch" not found. Use --force to continue.

Aborted due to warnings.

Below is my Gruntfile.js and my package.json

Gruntfile.JS

'use strict';
module.exports = function (grunt) {

    grunt.initConfig({
        version: {
            options: {
                file: 'lib/scripts.php',
                css: 'assets/css/main.min.css',
                cssHandle: 'su_styles'
            }
        },
        sass: {
            dist: {
                options: {
                    style: 'compressed'
                },
                files: {
                    'assets/css/main.min.css': [
                    'assets/scss/app.scss'
                    ]
                }
            }
        },
        watch: {
            sass: {
                files: [
          'assets/scss/*.scss',
          'assets/scss/foundation/*.scss'
                ],
                tasks: ['sass', 'version']
            },
            livereload: {
                // Browser live reloading
                // https://github.com/gruntjs/grunt-contrib-watch#live-reloading
                options: {
                    livereload: false
                },
                files: [
          'assets/css/main.min.css',
          'templates/*.php',
          '*.php'
                ]
            }
        },
        clean: {
            dist: [
        'assets/css/main.min.css'
            ]
        }
    });

    // Load tasks
    grunt.loadNpmTasks('grunt-contrib-clean');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-wp-version');
    grunt.loadNpmTasks('grunt-contrib-sass');

    // Register tasks
    grunt.registerTask('default', [
    'clean',
    'version',
    'sass'
    ]);
    grunt.registerTask('dev', [
    'watch'
    ]);

};

package.json – with some stuff taken out to preserve a bit of privacy

{
  "name": "sudoh",
  "version": "1.0.0",
  "author": "Brandon Shutter <brandon@brandonshutter.com>",
  "licenses": [
    {
      "type": "MIT",
      "url": "http://opensource.org/licenses/MIT"
    }
  ],
  "engines": {
    "node": ">= 0.10.0"
  },
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-clean": "~0.5.0",
    "grunt-contrib-watch": "~0.5.3",
    "grunt-wp-version": "~0.1.0",
    "grunt-contrib-sass": "~0.5.0"
  }
}

Thanks for your help ahead of time.

Related posts

Leave a Reply

1 comment

  1. It seems there wasn’t anything wrong with my setup. My code editor (Brackets) added hidden characters for whatever reason and was causing a syntax error. Switching over to Sublime and saving the file again allowed it work perfectly.

    Thanks for the help everyone.