Gulp不会将结果写入文件

时间:2014-12-10 21:20:19

标签: javascript less gulp

我的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管道。但为什么它突然开始失败?

1 个答案:

答案 0 :(得分:2)

尝试稍微更新较少的文件,以简化。这是一种常见的设计模式,对我来说效果非常好:

/*main.less*/
@import "somefile.less"
@import "some/deep/nested/file.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之类的内容。

这将为您解决各种令人头疼的问题。希望它有所帮助!