我一直在研究如何使用gulp构建系统来自动化开发过程。
我在修改我的样式表方面遇到了一些问题。我已经使用gulp-rev生成了带有更新版本号的文件,但它会继续在文件中的任何更改上创建额外的文件,这会增加我的设置大小。
gullfile.js
var gulp = require('gulp');
var watchLess = require('gulp-watch-less');
var less = require('gulp-less');
var plumber = require('gulp-plumber');
var watch = require('gulp-watch');
var rev = require('gulp-rev');
var revReplace = require('gulp-rev-replace');
var cleanCSS = require('gulp-clean-css');
var autoprefixer = require('gulp-autoprefixer');
var revAppend = require('gulp-rev-append');
//LESS
gulp.task('less', function() {
return gulp.src('assets/less/*.less')
.pipe(watchLess('assets/less/*.less'))
.pipe(less())
.pipe(autoprefixer({
browsers: ['> 0%'],
cascade: false
}))
.pipe(cleanCSS())
.pipe(gulp.dest('assets/css/'))
.pipe(rev())
.pipe(gulp.dest('assets/css/'))
.pipe(revAppend())
.pipe(gulp.dest('assets/css'))
.pipe(rev.manifest())
.pipe(gulp.dest('assets/'));
});
//Watch
gulp.task('watch', function(){
gulp.watch('assets/less/*.less', ['less']);
})
//Default
gulp.task('default', ['watch']);
我需要帮助创建带有更新更改的最新文件,并从文件目录中删除以前的文件,或者只提供带有最新更新/更改的文件。
我还使用了其他几个与rev相关的插件,但找不到正确的方法来配置它
好吧,您有四个带有目标位置的管道。
.pipe(gulp.dest('assets/css/'))
.pipe(gulp.dest('assets/css/'))
.pipe(gulp.dest('assets/css'))
.pipe(gulp.dest('assets/'));
其中三个目的地相同。期望管道中所有文件在不同阶段都有三个副本。对于gullow rev,您需要为清单添加一个额外的管道,但这仍然给我们留下了2而不是4。
尝试:
//LESS
gulp.task('less', function() {
return gulp.src('assets/less/*.less')
.pipe(watchLess('assets/less/*.less'))
.pipe(less())
.pipe(autoprefixer({
browsers: ['> 0%'],
cascade: false
}))
.pipe(cleanCSS())
.pipe(rev())
.pipe(revAppend())
.pipe(gulp.dest('assets/css'))
// WARNING!!! Put the manifest after all the file pipes
.pipe(rev.manifest())
.pipe(gulp.dest('assets/'));
});
这是一篇关于重新设置的文章,以防您想修改包,并将文件修改责任留给源代码管理或构建服务器。