Gulp Watch does not update

Question

Gulp Watch does not update

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

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

Already answering some questions:

Yes, it starts correctly, that is, GULP detects the change in the file and executes the function.
Yes, no default it minifies correctly.
Yes, if he does not have the minified file, he creates it, that is, he enters the function, but for some reason he can not 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 have already tried to declare the path of CSS directly in the function instead of calling the variable CSS . I have already tried declaring the variable as global, but none of this changes the result that is the blank file.

javascript gulpjs gulp

asked by anonymous 03.08.2016 / 03:11

2 answers

Where is pom.xml? Center sub menu absolute with css

score 1 · Answer 1

Modify your js and css file

./js/app.js to /js/app.js

./css/estilo.css to /css/estilo.css

It looks for an executable like this ./css/estilo.css.js , so it does not find it puts everything blank

just in case you try 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']);

score 0 · Answer 2

I'm not very advanced on Gulp , but as with Grunt , for example, the default method is just the name of the process being called. With this you can create a list of tasks.

For example, suppose you are going to work exclusively with the functions in JS , so you do not need to minify the css files. For this you could call the task onlyjs , for example:

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

If you only work with css , it could be the task onlycss :

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

In your current code you are not calling task , but the declaration of it.

But note that it's okay for you to continue calling task:'default' , as this is the default behavior. From the same example above, you could just call the JS and continue with Watch (which in this case would expand to css as well).

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

But if you want a task to call Watch and do not make the minification as soon as you call, just create a new task , like this:

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

Note : I currently work more with Grunt so it may be that some statement rule has changed, but the general idea is that.