Gulp 文件压缩和文件合并(文件合并压缩包)
Gulp的文件合并
这里我们需要通过gulp-useref来进行文件的合并
gulp-useref这是一款可以将HTML引用的多个CSS和JS合并起来，减小依赖的文件个数，从而减少浏览器发起的请求次数。gulp-useref根据注释将HTML中需要合并压缩的区块找出来，对区块内的所有文件进行合并。注意：它只负责合并，不负责压缩！ ,如果需要做其他操作，可以配合
gulp-if插件使用.
安装
一键安装不多解释
npm install --save-dev gulp-useref 复制代码
使用
const gulp = require('gulp') const useref = require('gulp-useref'); const useref = () => { return src('dist/*.html', { base: 'dist' }) .pipe(useref({ searchPath: ['dist', '.'] })) .pipe(dest('dist')) } 复制代码文件压缩
当然上面也说了需要配合gulp-if插件使用。
按照顺序执行下面的命令吧
npm install --save-dev gulp-if 复制代码
html的压缩
npm install --save gulp-htmlmin 复制代码
js的压缩
npm install --save-dev gulp-uglify 复制代码
css的压缩
npm install gulp-clean-css --save-dev 复制代码
然后我们对上面进行一些改造
const useref = () => { return src('dist/*.html', { base: 'dist' }) .pipe(plugins.useref({ searchPath: ['dist', '.'] })) // html js css .pipe(plugins.if(/\.js$/, plugins.uglify())) .pipe(plugins.if(/\.css$/, plugins.cleanCss())) .pipe(plugins.if(/\.html$/, plugins.htmlmin({ collapseWhitespace: true, minifyCSS: true, minifyJS: true }))) .pipe(dest('dist')) }
作者：是洋柿子啊
链接：https://juejin.cn/post/7038970361492291614
伪原创工具 SEO网站优化 https://www.237it.com/