首页 > 代码库 > gulp学习指南之CSS合并、压缩与MD5命名及路径替换

gulp学习指南之CSS合并、压缩与MD5命名及路径替换

2024-09-01 06:34:01   219人阅读

1.引入插件　

var gulp = require(‘gulp‘),
  //  uglify = require(‘gulp-uglify‘),
    concat = require(‘gulp-concat‘),
    minifycss = require(‘gulp-minify-css‘),
     rev = require(‘gulp-rev‘),
    revcollector = require(‘gulp-rev-collector‘);

控制台输入

npm install gulp gulp-concat gulp-minify-css gulp-rev gulp-rev-collector --save-dev

2.在gulpfile.js里写代码

gulp.task(‘concat‘,function(){
    gulp.src(‘XingboWeb/scenemall/public/static/css/reset.css‘)  //要压缩的文件
        .pipe(minifycss(‘reset.css‘))       //压缩css
        .pipe(rev())                        //文件名加md5后缀
        .pipe(gulp.dest(‘dist/css‘))　　　　 //
        .pipe(rev.manifest())　　　　　　　　 //rev-mainfest.json文件，里面是压缩文件的信息
        .pipe(gulp.dest(‘dist/rev‘));
});

gulp.task(‘rev‘,function(){
    gulp.src([‘dist/rev/*.json‘,‘XingboWeb/scenemall/app/views/home/detail.phtml‘])   //读取压缩文件信息，和要替换目录的文件
        .pipe(revcollector({        //执行替换
            replaceReved:true,
            dirReplacements:{      
                ‘css‘:‘dist/css‘
            }
        }))
        .pipe(gulp.dest(‘XingboWeb/scenemall/app/views/home/‘))
    //    .pipe(gulp.dest(‘dist/html‘))
})

注意：minifycss压缩文件名一定要替换目录里的文件名一致，否则替换不成功，例如文件名里reset.css，但是压缩的文件名是reset.min.css，这样的是不能替换成功的

3.之后在控制台运行gulp,就可以替换成功了

 

gulp学习指南之CSS合并、压缩与MD5命名及路径替换


联系
我们