Gulp Watch does not update

Question

Hello, I’m a beginner in GULP and I have the following problem, the code below, which simply minifies the JS and the CSS, works perfectly if you rotate the functions in the default and rotate the GULP. The problem is that with the Watch it does not work, it creates the file but blank.

Already answering some questions:

• Yes, it is started correctly, ie the GULP detects the change in the file and executes the function.
• Yes, in the default it minifica correctly.
• Yes, if you do not have the minified file, it creates, that is, it enters the function, but for some reason it cannot read the CSS/JS when the function is called by Watch.

Code below:

var css = [
    './css/estilo.css'
];
var js  = [
    './js/app.js'
];

var gulp = require('gulp');
var jsmin = require('gulp-jsmin');
var rename = require('gulp-rename');
var uglify = require("gulp-uglify");
var concat = require("gulp-concat");
var watch = require('gulp-watch');
var cssmin = require("gulp-cssmin");
var stripCssComments = require('gulp-strip-css-comments');

gulp.task('minify-css', function(){
    gulp.src(css)  
        .pipe(stripCssComments({all: true}))
        .pipe(cssmin())
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest('./css/min/'));
});

gulp.task('minify-js', function () {
    gulp.src(js)
        .pipe(jsmin())
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest('./js/min/'));
});

gulp.task('default', ['watch']);

gulp.task('watch', function() {
    gulp.watch(js, ['minify-js']);
    gulp.watch(css, ['minify-css']);
});

I’ve tried to declare the path of CSS directly in the function instead of calling the variable CSS. I have also tried to declare the variable as global, but none of this changes the result which is the blank file.

Answer 1

Modify your js and css file

./js/app.js for /js/app.js

./css/estilo.css for /css/estilo.css

he seeks a performer like that ./css/estilo.css.js , then as he does not find he puts everything blank

by way of doubt tries to reverse the order

gulp.task('default', ['watch']);

gulp.task('watch', function() {
    gulp.watch(js, ['minify-js']);
    gulp.watch(css, ['minify-css']);
});

for

gulp.task('watch', function() {
        gulp.watch(js, ['minify-js']);
        gulp.watch(css, ['minify-css']);
    });
gulp.task('default', ['watch']);

Answer 2

I’m not very advanced on the subject Gulp, but as in Grunt, for example, the method default is just the name of the process to be called. With this you can create a task list.

For example, suppose today you will work exclusively with the functions in JS, so you don’t need to minify the files css. For that you could call the task onlyjs, for example:

gulp.task('onlyjs', ['minify-js']);

Already if you will only work with css, could be the task onlycss:

gulp.task('onlycss', ['minify-css']);

In your current code you are not calling task and yes the declaration of the same.

But note that there is no problem with you continuing to call task:'default', because this is the default behavior. Starting from the same previous example, you could just call minification JS and continue with a Watch (which in this case would expand to the css also).

gulp.task('onlyjs', ['minify-js','watch']);

But if you want a task be called Watch and do not make the minification as soon as called, just create a new task, thus:

gulp.task('watch', ['watch']);

Note: Currently I work more with Grunt then it may be that some declaration rule has changed, but the general idea is this.