I have been working on how to automate the development process using gulp build system.
I am having some issue regarding revisioning of my stylesheets. I have used gulp-rev to generate file with their update revision number but it keeps on creating extra file on any of the changes inside the file which in result increasing my setup size.
gulpfile.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']);
I need help in creating the latest file with the update changes and remove the previous file from the file directory or something which will give me only on file with the latest update/changes in it.
I have also used several other rev related plugin but din't find the correct way to config it
Well, you have four pipes with destination locations.
.pipe(gulp.dest('assets/css/'))
.pipe(gulp.dest('assets/css/'))
.pipe(gulp.dest('assets/css'))
.pipe(gulp.dest('assets/'));
Three of them with the same destination. Expect to have three copies of all the files in the pipe at different stages. With gulp-rev you need an extra pipe for the manifest, but that still leaves us with 2 instead of 4.
Try:
//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/'));
});
Here is post on re-visioning in case you want to revision your package and leave file revision responsibilities to your source control, or build server.