0

I just had a Grunt setup on my Win8 machine running a ['sass', 'autoprefixer', 'connect', 'watch'] task to live refresh and design in browser with no issues. The processes were watching my folders for change, compiling from SCSS to CSS, refreshing my browser fine.

Then late last nite I renamed the directory on disk - from c:\ruby-sass-susy to c:\libsass-susy. Sadly, this hosed my setup :(

Now when I run my default grunt -- it starts up the server -- compiles the files the first time -- and throws up a browser with my project ready to go the way it should.

But now changing and saving .scss it does not compile anything. What I see at the command line:

Running "watch" task
Waiting...
>> File "scss\00-config\_config.scss" changed.

But no compilation happens, it does not create my global.css and associated map file and there is no activity at all.

What I have tried:

  • npm uninstall <package> for each of the relevant watch, connect
    and grunt-sass packages.

  • npm install <package> --save-dev on all three, to get a clean reinstall of all three

  • then (when that did nothing) I started in a fresh directory -- using my package.json and bower.json, I reinstalled all of the dependencies in the new directory from scratch, copied over the Gruntfile, and ran it all again to test

I'm getting the same result in the new directory. What happened? Is the problem now further up the line in my Node or npm install then? Something not pointing at the right directory? (excuse me I am not a Grunt or javascript programming expert)

Here is my Gruntfile -- the relevant bits, I omitted packages I am not running for the default:

~~~

// Gruntfile for LibSass - 03/26/15

module.exports = function(grunt) {

'use strict';

grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-contrib-watch');

grunt.initConfig({

    pkg: grunt.file.readJSON('package.json'),

    // Sass (grunt-sass)
    sass: {
        options: {
            sourceMap: true, // Create source map
            outputStyle: 'expanded' // Specify output
        },
        dist: {

            files: [
                {
                    expand: true, // Recursive
                    cwd: "scss", // The startup directory
                    src: ["**/*.scss"], // Source files
                    dest: "css", // Destination
                    ext: ".css" // File extension 
                }
            ]
        }
    },


    // Autoprefixer
    autoprefixer: {
        options: {
            browsers: ['last 2 versions'],
            map: true // Update source map (creates one if it can't find an existing map)
        },

        // Prefix all files
        multiple_files: {
            src: 'css/**/*.css'
        },
    },

    // Grunt connect (server)
    connect: {
        server: {
            options: {
                livereload: 1337,
                port: 9001,
                base: '',
                open: {
                    target: 'http://localhost:9001/',
                }
            }
        },
    },

    // Watch!
    watch: {
      sass: {
        files: ['scss/**/*.{scss,sass}'],
      },

      livereload: {
        files: ['*.html', '*.php', 'img/**/*.{png,jpg,jpeg,gif,webp,svg}'],
        options: {
          livereload: true,
        },
      },
    }
});

// Default Sass Server
grunt.registerTask('default', ['sass', 'autoprefixer', 'connect', 'watch']);

};
vongoh
  • 1
  • 2

1 Answers1

0

FYI I solved this issue by replacing grunt-contrib-connect server with grunt-browser-sync -- Browser Sync

After chasing down the issues and reading other peoples experiences with the 'connect' server, it seemed to me that that was probably the one thing everyone that has problems had in common. So I dumped it and hooked up a new solution.

So far it is working great! Very reliable and quick server, and also has some added features like syncing and refreshing browsers on multiple devices in realtime.

vongoh
  • 1
  • 2