Gulp 不会将结果写入文件

Question

我有一个gulpfile.js，看起来像这样：

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']);
});

随着我的开发，较少的任务突然停止工作。控制台不会抛出任何错误，一切看起来都应该如此，但everything.css 文件没有得到更新。我什至删除了该文件，但它不再被创建。

我完全不知道发生了什么，甚至重新启动了我的计算机作为健全性检查，但它没有帮助。

编辑： 所以显然它是less 管道。但是为什么突然开始失败了呢？

Answer 1

尝试稍微更新一下您的 less 文件，以简化操作。这是一种常见的设计模式，对我来说效果很好：

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

在您的其他 less 文件中，这些文件将是您保存实际 less 代码的位置。

然后在你的gulpfile.js 中你会想要修改一下：

...
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
});

注意： gulp.watch 不会找到新文件 - 当你有新文件时需要重新启动，或者使用类似 gulp-watch 的东西。

这将为您解决各种头痛。希望对您有所帮助！