自动化打包 CSS

一、新建文件夹 gulp

$ mkdir gulp-project

　　

二、打开 gulp-project

cd gulp-project

　　

三、安装gulp插件

$ npm install gulp --save # yarn add gulp --dev

　　

四、根目录新建 src/bootstrap.css

bootstrap.css

body{
  margin: 0;
  padding: 5px;
  color: red;
  background: yellow;
}

 

以下为Gulp 方法：

 

六、安装 gulp-clean-css 插件 

作用：将CSS文件压缩转换

　　

七、安装 gulp-rename 插件

作用：自定义文件名

　　

八、根目录新建 gulpfile.js

const fs = require('fs')
// src: 读取，dest: 写入
const { src, dest } = require('gulp')
// 文件的压缩转换
const cleanCss = require('gulp-clean-css')
// 修改name文件名
const rename = require('gulp-rename')


exports.default = () => {
  return src('src/*.css')
    .pipe(cleanCss()) // 写入流
    .pipe(rename({ extname: '.min.css' })) // 更换后缀名
    .pipe(dest('dist')) // 输出到dist目录下
}

　　

以下为 Node 方法：

六、根目录新建 gulpfile.js

const fs = require('fs')

// 压缩
const { Transform } = require('stream')

const cssCompression = () => {
  // 文件读取流
  const read = fs.createReadStream('src/bootstrap.css')

  // 文件导出流
  const write = fs.createWriteStream('src/bootstrap.min.css')

  const transform = new Transform({
    transform: (chunk, encoding, callback) => {
      const input = chunk.toString()
      const output = input.replace(/\s+/g, '').replace(/\/\*.+?\*\//g, '')
      callback(null, output)
    }
  })
  // 将读取的文件导入写入文件流
  read
    .pipe(transform)
    .pipe(write)

  return read
}


exports.default = cssCompression