使用gulp4自动生成一个reset.min.css

一、前言

团队需要开发一个前端开发脚手架，这里我要写一个reset.css文件，方便开发中使用。
因为不想只写一个临时文件，所以做成了一个工具。

好处就是，这样生成的文件可以在大多数项目中通用，可以大大减少css的代码量，提升项目性能。

二、项目目录

├─ .gitignore
├─ config
│  ├─ build.js
│  ├─ clean.js
│  ├─ concat.js
│  └─ watch.js
├─ dist
│  ├─ base.min.css
│  ├─ box.min.css
│  ├─ flex.min.css
│  ├─ font.min.css
│  └─ reset.min.css
├─ gulpfile.js
├─ index.css
├─ index.html
├─ package-lock.json
├─ package.json
├─ readme.md
├─ styles
│  ├─ base.css // 基础reset
│  ├─ box.css // 容器
│  ├─ flex.css // flex
│  └─ font.css // 字体
├─ test
│  └─ clean-css.js
├─ utils
│  └─ chalkLog.js // 彩色console.log
└─ yarn.lock // 依赖控制

三、逻辑

最终实现就是，定义好src目录下的base、box、flex、font（或更多）css文件，启动gulp命令，在编写src目录下的每个css文件时候，自动去minify（压缩）生成目标*.min.css文件以及concat（合并）源css文件生成reset.min.css文件，并保持监听。

四、代码部分

压缩每个css文件到dist目录下

// build.js
const { src, dest }  = require('gulp');
const rename = require("gulp-rename");
const cleanCSS = require('gulp-clean-css');
const chalkLog = require('../utils/chalkLog');

function build(cb) {
	chalkLog('开始压缩...', 'greenBright.bold');

	src(['styles/*.css', '!styles/*.min.css']) // 过滤 *.min.css
		.pipe(rename({
			suffix: '.min'
		}))
		.pipe(cleanCSS())
		.pipe(dest('dist'));
	
	chalkLog('压缩完毕！', 'blueBright.bold');
	
	if (cb !== undefined) {
		cb()
	}
}

module.exports = build

清理dist

// clean.js
const { src }  = require('gulp');
const gulpClean = require('gulp-clean');
const chalkLog = require('../utils/chalkLog');

function clean(cb) {
	chalkLog('清理dist文件夹')
	src('dist/*.css', {
		read: false
	})
		.pipe(gulpClean())

	if (cb !== undefined) {
		cb()
	}
}

module.exports = clean

合并css文件到reset.min.css

// concat.js
const { src, dest }  = require('gulp');
const gulpConcat = require('gulp-concat');
const cleanCSS = require('gulp-clean-css');
const chalkLog = require('../utils/chalkLog');


function concat(cb) {
	chalkLog('开始合并文件...', 'greenBright.bold');

	src(['styles/*.css', '!styles/*.min.css']) // 过滤 *.min.css
		.pipe(gulpConcat('reset.min.css'))
		.pipe(cleanCSS())
		.pipe(dest('dist'));
	
	chalkLog('合并完毕！', 'blueBright.bold');

	if (cb !== undefined) {
		cb()
	}
}

module.exports = concat

监听文件改动

// watch.js
const build = require('./build');
const chalkLog = require('../utils/chalkLog');
const gulpWatch = require('gulp-watch');
const clean = require('./clean');
const concat = require('./concat');


function watch() {
	chalkLog('开始监听文件...')
	gulpWatch(['styles/*.css', '!styles/*.min.css'], function(e) {
		const start = e.path.indexOf('/styles')
		const path = e.path.slice(start)
		chalkLog(path + ' ' + e.event, 'redBright.bold')

		clean()
		build()
		concat()
	});
}

module.exports = watch

集成、导出task
执行顺序：clean => build => concat => watch

// gulpfile.js
const { series } = require('gulp');

const build = require('./config/build.js')
const watch = require('./config/watch.js')
const clean = require('./config/clean.js')
const concat = require('./config/concat.js')

exports.clean = clean
exports.watch = watch
exports.build = build
exports.concat = concat

exports.default = series(clean, build, concat, watch)

五、坑点

捯饬了差不多一天，gulp4和之前的区别还是有的，也有一些坑点，所以记录下，防止踩坑。

gulpfile.js文件为导出task文件了，可以看作其是一个集成多个task的核心文件。走gulp命令可以看到如下：

[17:13:34] Using gulpfile ~/Desktop/Work/cli-reset-css/gulpfile.js
[17:13:34] Starting 'default'...
[17:13:34] Starting 'clean'...
清理dist文件夹
[17:13:34] Finished 'clean' after 7.83 ms
[17:13:34] Starting 'build'...
开始压缩...
压缩完毕！
[17:13:34] Finished 'build' after 3.98 ms
[17:13:34] Starting 'concat'...
开始合并文件...
合并完毕！
[17:13:34] Finished 'concat' after 2.67 ms
[17:13:34] Starting 'watch'...
开始监听文件...

会先执行default，接着执行series按顺序来执行task。这里的集成没有像gulp老版本每个任务都要声明一个task name，这里只需要导出执行task的匿名函数即可。

导出的函数都有一个cb参数，并且在顺序执行中需要让其能够执行，就是有cb即执行，没有cb则不处理，这是一个done function。

每个任务都需要done才能执行下一个任务（注意：在这里除了watch不需要，因为不结束）

gulp官方文档确实有点难懂，在watch()这个api中，就只是描述了它是监听文件，但是没有去告诉怎么去做热更新（持续监听），官方watch()使用只执行了一次watch task就结束了，所以没有采用，这里采用了gulp-watch插件来做处理，效果不错。