我的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
管道。但为什么它突然开始失败?
答案 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
之类的内容。
这将为您解决各种令人头疼的问题。希望它有所帮助!