Sass reloading

[andredewaard]

When running gulp watch app.scss is compiled on save but there is no hot reloading. There is when i make the sass inside my Vue component.

[dolbex]

Huh, I'm not having that problem. Are you refreshing and 'poof' the changes suddenly appear?

[andredewaard]

Yes if i refresh the changes will appear. I have an app.scss in 'resources/sass/app.scss' which saves and versions to 'public/css/app.scss' and all the 'scoped' sass will save and version to 'public/css/project_name.css'.

[andredewaard]

It is working now. I think it was my proxy. But if is refreshing 3 times before the changes are visible. Is this because gulp and gulp watch are running simultaneously?

[dolbex]

Cool, glad you got it sorted!

You shouldn't have two gulp's running. You should only have webpack running with npm run dev and gulp running from the root of your project.

[andredewaard]

Thanks @dolbex One question. Without Gulp watch my sass is not compiling that is why i run gulp and gulp watch in the root of my project. How do you do that?

[dolbex]

You may need to add something to the BrowserSync files array in the main elixir command. Something like:

        BrowserSync.init();
        mix.BrowserSync({
            proxy           : "testproject.app:8000/",
            logPrefix       : "Project Name",
            logConnections  : false,
            reloadOnRestart : false,
            notify          : false,
            files           : [
                 "**/*.php",
                 "**/*.scss"
            ]
        });

[andredewaard]

That works for the reloading. But my sass is not compiling. So it is reloading but there are no changes.

[dolbex]

what about something like this: (I'm shooting from the hip so let me know if there are any errors)

/*
 |--------------------------------------------------------------------------
 | Elixir Asset Management
 |--------------------------------------------------------------------------
 |
 | Elixir provides a clean, fluent API for defining some basic Gulp tasks
 | for your Laravel application. By default, we are compiling the Sass
 | file for our application, as well as publishing vendor resources.
 |
 */

// Just making paths a little shorter
var jsAssetsPath = './resources/assets/js'

// Requirements
var elixir = require('laravel-elixir');
var gulp = require('gulp');

require('laravel-elixir-webpack-ex');

// Elixir extension to clean up for multiple Vue projects
elixir.extend('buildVueProject', function(mix, projectName, entryPath, configPath) {

  var project = {}
  project[projectName] = entryPath
  mix.webpack(project, require(configPath), elixir.config.publicPath);

});

elixir(function(mix) {
    if(elixir.config.production) {
        mix.sass('app.scss')
        .buildVueProject(
            mix,
            'test-vue-app',
            '/my-vue-project/src/main.js',
            jsAssetsPath + '/my-vue-project/build/webpack.prod.conf.js'
        );

        // Let's let elixer take care of the hashing
        mix.version([
            'public/js/css/test-vue-app.css',
            'public/js/test-vue-app.js'
        ])
    } else {
        mix.sass('app.scss')
        .browserSync({
            proxy           : "testproject.app:8000/",
            logPrefix       : "Project Name",
            logConnections  : false,
            reloadOnRestart : false,
            notify          : false,
            files           : [
                 "**/*.php",
                 "**/*.scss"
            ]
        });
    }
});

[andredewaard]

Yes that is working. The only thing to add is BrowserSync.init() before mix.sass('').browserSync

[dolbex]

Cool, I'll update the readme