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'))
}

项目地址：gitee.com/liuyinghao1…