node.js - gulp中gulp-rev-collector不起作用
天蓬老师
天蓬老师 2017-04-17 14:59:12
0
1
908

gulp使用gulp-rev为文件添加时间戳,但是使用gulp-rev-collector替换时失败,是不是gulpfile中配置错误呢?
代码如下:

var gulp  = require('gulp');

var sass = require('gulp-sass');//编译sass
var cssMin = require('gulp-minify-css');//压缩css
var imageMin = require('gulp-imagemin');//压缩图片
var rev = require('gulp-rev');//MD5
var htmlmin = require('gulp-htmlmin');//压缩html
var revCollector = require('gulp-rev-collector');//替换时间戳


gulp.task('sass',function(){
    gulp.src('./SASS/*.scss')
        .pipe(sass())
        .pipe(cssMin())
        .pipe(rev())
        .pipe(gulp.dest('dist/stylesheet'))
        .pipe( rev.manifest() )
        .pipe( gulp.dest( 'rev/stylesheet' ) );
});

gulp.task('imagemin', function () {
    gulp.src('./images/*.{png,jpg,gif,ico}')
        .pipe(imageMin({
            optimizationLevel: 5, 
            progressive: true, 
            interlaced: true, 
            multipass: true 
        }))
        .pipe(rev())
        .pipe(gulp.dest('dist/images'))
        .pipe(rev.manifest())        
        .pipe(gulp.dest('./rev/images'));
});

gulp.task('revCollector', function () {

    gulp.src(['rev/**/*.json', './*.html'])
        .pipe( revCollector())
        .pipe(htmlmin())
        .pipe( gulp.dest('dist/'));
});
gulp.task('revCollectorCss', function () {
     gulp.src(['rev/**/*.json', './dist/stylesheet/*.css'])
        .pipe(revCollector())
        .pipe(gulp.dest('./dist/stylesheet'));
});


gulp.task('auto', function () {
    gulp.watch('./SASS/*.scss', ['sass'])
});




gulp.task('default', ['sass', 'auto','imagemin','revCollectorCss','revCollector']);

目录结构如下:

希望在当前目录生成dist:dist中有images和stylesheet文件夹,以及压缩过的index.html
运行gulp后,MD5添加没有问题,能生成rev下json,压缩都没有问题,但是不进行替换

请各路大神帮我看看gulp哪里写错了

天蓬老师
天蓬老师

欢迎选择我的课程,让我们一起见证您的进步~~

reply all(1)
Ty80

When I read the documentation carefully, I found that there was a problem with my code, which has been solved now. The main reference is here http://www.ydcss.com/archives...
The main problem is the dependency of each task. It is very likely that the json file of the manifest cannot be found when the task is executed. Now add it After the dependency, replace ok. One thing that needs to be reminded is that because the call is dependent, it is best to take the return value of return. This way it is easier to use

var gulp  = require('gulp');

var sass = require('gulp-sass');//编译sass
var cssMin = require('gulp-minify-css');//压缩css
var imageMin = require('gulp-imagemin');//压缩图片
var rev = require('gulp-rev');//MD5
var htmlmin = require('gulp-htmlmin');//压缩html
var revCollector = require('gulp-rev-collector');//替换时间戳


gulp.task('sass',function(){
    return gulp.src('./SASS/*.scss')
                .pipe(sass())
                .pipe(cssMin())
                .pipe(rev())
                .pipe(gulp.dest('dist/stylesheet'))
                .pipe( rev.manifest() )
                .pipe( gulp.dest( 'rev/stylesheet' ) );
});

gulp.task('imagemin', function () {
    return gulp.src('./images/*.{png,jpg,gif,ico}')
                .pipe(imageMin({
                    optimizationLevel: 5, //类型:Number  默认:3  取值范围:0-7(优化等级)
                    progressive: true, //类型:Boolean 默认:false 无损压缩jpg图片
                    interlaced: true, //类型:Boolean 默认:false 隔行扫描gif进行渲染
                    multipass: true //类型:Boolean 默认:false 多次优化svg直到完全优化
                }))
                .pipe(rev())
                .pipe(gulp.dest('dist/images'))
                .pipe(rev.manifest())                                   //- 生成一个rev-manifest.json
                .pipe(gulp.dest('./rev/images'));
});

gulp.task('revCollector',['revCollectorCss'], function () {
    var options = {
        removeComments: true,  //清除HTML注释
        collapseWhitespace: true,  //压缩HTML
        collapseBooleanAttributes: true,  //省略布尔属性的值 <input checked="true"/> ==> <input checked />
        removeEmptyAttributes: true,  //删除所有空格作属性值 <input id="" /> ==> <input />
        removeScriptTypeAttributes: true,  //删除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true,  //删除<style>和<link>的type="text/css"
        minifyJS: true,  //压缩页面JS
        minifyCSS: true  //压缩页面CSS
    };
    return gulp.src(['rev/**/*.json', './*.html'])
            .pipe( revCollector())
            .pipe(htmlmin(options))
            .pipe( gulp.dest('dist/'));
});
gulp.task('revCollectorCss',['sass','imagemin'], function () {
    return gulp.src(['rev/**/*.json', './dist/stylesheet/*.css'])
                .pipe(revCollector())
                .pipe(gulp.dest('dist/stylesheet'));
});

gulp.task('auto', function () {
    gulp.watch('./SASS/*.scss', ['sass']);
});

gulp.task('default', [ 'auto','revCollector']);
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!