Gulp不会将结果写入文件

Question

I have a gulpfile.js that looks like this:

var gulp = require('gulp'),
concat = require('gulp-concat'),
less = require('gulp-less'),
minifyCSS = require('gulp-minify-css'),
uglify = require('gulp-uglify'),
autoprefixer = require('gulp-autoprefixer');

gulp.task('less', function () {
    gulp.src(['less/*.less'])
        .pipe(less())
        .pipe(concat('everything.css'))
        .pipe(autoprefixer())
        .pipe(minifyCSS())
        .pipe(gulp.dest('asset/'));
});

gulp.task('js', function () {
    gulp.src(['javascript/*.js'])
        .pipe(concat('everything.js'))
        .pipe(uglify())
        .pipe(gulp.dest('asset/'));
});

gulp.task('watch', function() {
    gulp.watch('javascript/*.js', ['js']);
    gulp.watch('less/*.less', ['less']);
});

As I was developing, the less task stopped working out of the blue. The console doesn't throw any errors, everything looks just like it should but the everything.css file does not get updated. I even removed the file and it doesn't get created again.

I'm compeltely clueless to what's going on, even rebooted my computer as a sanity check but it didn't help.

EDIT: So apparently it's the less pipe. But why did it start to fail suddenly?

Answer 1

Try updating your less files a bit, to simplify. This is a common design pattern, and it works very well for me:

/*main.less*/
@import "somefile.less"
@import "some/deep/nested/file.less"

In your other less files, those will be where you keep your actuall less code.

Then in your gulpfile.js you will want to modify a bit:

...
gulp.task('less', function () {
    gulp.src(['less/main.less']) //only pull in your main.less file
        .pipe(less())
        .pipe(autoprefixer())
        .pipe(minifyCSS())
        .pipe(gulp.dest('asset/'));
});
...

gulp.task('watch', function() {
    gulp.watch('javascript/*.js', ['js']);
    gulp.watch('less/*.less', ['less']); //this remains the same - you want to watch for all changes
});

Note: gulp.watch will not find new files - you will need to restart when you have new files, or use something like gulp-watch .

This will solve all kinds of headaches for you. Hope it helps!