Gulp watches/changes only main file instead of all files

Question

I have problem with gulp watch task(i suppose) or with compiling files. I want gulp to watch all css files in styles folder, but it watches nad changes only the main index.html file and I can't see changes in the browser which I have made in css files.

Folders structure: https://ibb.co/kU6c7S

gulpfile.js:

require("./gulp/tasks/styles");
require("./gulp/tasks/watch");

styles.js:

var gulp = require('gulp');
postcss = require('gulp-postcss');
autoprefixer = require('autoprefixer');
cssvars = require('postcss-simple-vars');
nested = require('postcss-nested');
cssImport = require('postcss-import');
mixins = require('postcss-mixins');

gulp.task('styles', function(){
    return gulp.src('./app/assets/styles/styles.css').pipe(postcss([cssImport, mixins, cssvars, nested, autoprefixer])).on("error", function(errorInfo){
            console.log(errorInfo.toString());
            this.emit("end");
        });
        pipe(gulp.dest('./app/temp/styles'));
        });

watch.js:

var gulp = require('gulp');
watch = require('gulp-watch');
browserSync = require('browser-sync').create();

gulp.task('watch', function(){

    browserSync.init({
        notify: false,
        server: {
            baseDir: "app"
        }
    });

     watch('./app/index.html', function() {
    browserSync.reload();
  });

watch('./app/assets/styles/**/*.css', function(){
        gulp.start('cssInject');
    });
});

gulp.task('cssInject', ['styles'], function() {
    return gulp.src('./app/temp/styles/styles.css')
    pipe(browserSync.stream());
});

_mainPhoto.css:

.main {
position: relative;


&__text {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-80%);
    width: 100%;
    text-align: center;
}

&__logo {
    font-weight: normal;
    color: #3c443d;
    font-size: 1.1rem;
    margin: 0;

    @mixin atSmall {
        font-size: 2.2rem;
    }

    @mixin atMedium {
        font-size: 3.5rem;
    }

    @mixin atLarge {
        font-size: 5.8rem;
    }

}

&__subtitle {
    font-weight: 300;
    color: #3c443d;
    font-size: 1.1rem;

    @mixin atSmall {
        font-size: 1.5rem;
    }
}

&__subsubtitle {
    color: #d4d8d6;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, .2);
    max-width: 30rem;
    font-size: 1.1rem;
    margin-left: auto;
    margin-right: auto;
}

}

Bash doesn't show any error:

$ gulp watch
[20:22:52] Using gulpfile ~\Desktop\Web developer course - mastering modern 
workflow\Projects\Project no.1\travel-site\gulpfile.js
[20:22:52] Starting 'watch'...
[20:22:52] Finished 'watch' after 86 ms
[Browsersync] Access URLs:
 -------------------------------------
       Local: http://localhost:3000
    External: http://192.168.1.14:3000
 -------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.1.14:3001
 -------------------------------------
[Browsersync] Serving files from: app

Thanks for any tips ! Ann

score 0 · Answer 1 · answered Apr 13 '18 at 18:43

0

I don't think you actually need to require gulp-watch. You should be able to do the following:

Instead of

watch('./app/assets/styles/**/*.css', function(){
        gulp.start('cssInject');
    });
});

Do

gulp.watch(['./app/assets/styles/**/*.css'], ['cssInject']);

Which is to say, when the css files change in your /styles directory run the cssInject task

answered Apr 13 '18 at 18:43

Ghostrydr

752
5
14

This doesn't work for me.. I think gulp can't compile any other changes in files except index.html. Seems like gulp is based on previously saved data (before I've added mixins and split gulpfile js. to style.js & watch.js, which means i can remove lines of code in css and js files and nothing changes. Bash now shows SyntaxError: Unexpected end of input (by additional " ; " in my code), but it shows the same even when I remove it and save. Gulp simply ignores changes in files. – hedonist_ann Apr 13 '18 at 20:07
Sounds like there might be another issue at play here. Just out of curiosity, what happens if you have all your tasks listed in `gulpfile.js`, and don't include the requires. – Ghostrydr Apr 17 '18 at 14:50

Gulp watches/changes only main file instead of all files

1 Answers1