johnpapa / generator-hottowel

Yo generator that creates an Angular app via HotTowel
835 stars 230 forks source link

Less Changes reloads the website #218

Open dashawk opened 6 years ago

dashawk commented 6 years ago

Issue details

Every time there is a change in any of the less files, the browser reloads but the changes made from the less file did not reflect on the website.

Steps to reproduce/test case

Here is my gulp task

// Here is the modified styles task
gulp.task('styles', function () {
    var bundle = gulp
        .src(config.client + 'app/themes/' + THEME_NAME + '/less/styles.less')
        .pipe($.plumber())
        .pipe($.less())
        .pipe($.autoprefixer({
            browsers: ['last 2 versions', '> 5%']
        }))
        .pipe($.concat('themeStyles.tmp'));

    var globalStyle = gulp
        .src(config.less)
        .pipe($.plumber())
        .pipe($.less())
        .pipe($.autoprefixer({
            browsers: ['last 2 versions', '> 5%']
        }))
        .pipe($.concat('globalStyles.tmp'));

    var stream = merge(bundle, globalStyle)
        .pipe($.concat('styles.css'))
        .pipe(gulp.dest(config.temp));

    return stream;
});

// Here is the modified less-watcher
gulp.task('less-watcher', function () {
    gulp.watch([
        config.client + 'app/themes' + THEME_NAME + '/less/**/*.*',
        config.less
    ], ['styles']);
});

// Here is the modified startBrowserSync function
function startBrowserSync(isDev, specRunner) {
    if (args.nosync || browserSync.active) {
        return;
    }

    log('Starting BrowserSync on port ' + port);

    // If build: watches the files, builds, and restarts browser-sync.
    // If dev: watches less, compiles it to css, browser-sync handles reload
    if (isDev) {
        gulp.watch([
            config.client + 'app/themes' + THEME_NAME + '/less/**/*.*',
            config.less
        ], ['styles'])
            .on('change', changeEvent);
    } else {
        gulp.watch([config.less, config.js, config.html], ['browserSyncReload'])
            .on('change', changeEvent);
    }

    ...
    ...
    ...
}

Please specify which version of generator-hottowel, node and npm you're running

Affected platforms

Which gulp command are you running ?

{gulp serve-dev}