前言
最近在做一个需求，由于我们是打包后形成静态文件然后提交到git上，最后再上系统同步代码到服务器上。我们的整个流程是这样的：
1、npm run build
…..看着屏幕等待打包完成，ps:等待的过程很煎熬
2、git add -A
3、git commit
4、git push
这整个过程下来，最主要的问题是，在npm run bulid的时候你需要等待打包的完成，而这个过程还是比较耗时的，所以你只能干瞪眼，然后打包完后你再进行git的提交。所以我在想，有没有一个办法，写个node程序，npm run build的时候去执行这个node程序，用inquirer询问用户提交的commit message，然后打包完后自动化提交到git，这样我们就不用去等待打包的过程了。而且我们可以通过执行node程序的过程中可以进行其他的一些必要操作，比如我做的项目由于历史遗留问题，css和图片都没有进行压缩，并且css是通过html导入不是在js中import进来的（import的方式导入的css可以通过webpack进行压缩，而html的link导入的我找不到webpack进行压缩的办法，如果各位大大有办法对这种方式导入的css进行打包的方法的话，可以在评论下面告诉我哈），所以我就可以通过在这个node程序里面写一些gulp程序，来对图片和css进行压缩了。
整体思路就是这样，怎么做，客官别急，待我慢慢道来。
安装依赖
首先是需要接受用户输入，用来git commit时输入的commit message，所以我们需要inquire模块。
接着我们需要通过node的提交git，所以我们需要simple-git模块。
然后我们需要获取本地当前的分支是哪个分支，方便simple-git提交的时候提交到当前分支上，所以需要git-branch模块。
然后需要是使用到gulp以及gulp的css和图片压缩，所以需要依赖gulp、gulp-minify-css、gulp-iamgemin
这些模块就是程序重要依赖的模块
编写build.js打包程序
接受用户输入&调用webpack打包代码
const ora = require('ora')
const {prompt} = require('inquirer')
const webpackConfig = require('./webpack.config.js')
const webpack = require('webpack')
const spinner = ora('building....')
// 接受用户输入
const question = [
{
type: 'input',
name: 'commitMessage',
message: 'Please input commit message:',
validate(val) {
if(val === ''){
return 'commit messag is required'
}
return true
}
}
]
prompt(question).then(({commitMessage}) => {
spinner.start()
webpack(webpackConfig, (err, stats) => {
spinner.stop()
if(err) throw err
if(stats.hasErrors()) {
console.log(chalk.red('build failed with errors \n'))
process.exit(1)
}
// webpack打包完成后，调用gulp压缩css和图片
})
调用gulp压缩css和图片
const gulp = require('gulp')
const minifyCSS = require('gulp-minify-css')
const imagemin = require('gulp-imagemin')
const pngquant = require('imagemin-pngquant')
// 压缩 css 文件
gulp.task('css', function () {
gulp.src('src/css/*.css')
.pipe(minifyCSS())
.pipe(gulp.dest('dist/css'))
})
// 压缩images下的所有图片
gulp.task('image', function(){
return gulp.src('src/images/*.*')
.pipe(imagemin({
progressive: true,
svgoPlugins: [{
removeViewBox: false
}],
use: [pngquant({
quality: '100'
})]
}))
.pipe(gulp.dest('dist/images'))
})
// 定义默认任务，默认任务依赖css任务和image任务
gulp.task('default', ['css', 'image'], function() {
// 所有任务完成的回调，所以提交到git上的代码在这里
})
// 启动任务
gulp.start('default')
提交代码到git上
const git = require('simple-git')()
const branch = require('git-branch')
git.add(['-A'])
.commit(commitMessage) // commitMessage来自第一步中用户输入的
.push('origin', branch.sync()) // branch.sync()获取本地当前分支
通过这三个步骤，我们就完成了一键实现webpack打包、gulp压缩css和图片以及git的提交了。最终的代码build.js如下：
const ora = require('ora')
const {prompt} = require('inquirer')
const chalk = require('chalk')
const webpackConfig = require('./webpack.config.js')
const webpack = require('webpack')
const git = require('simple-git')()
const branch = require('git-branch')
const gulp = require('gulp')
const minifyCSS = require('gulp-minify-css') // 获取 minify-css 模块（用于压缩 CSS）
const imagemin = require('gulp-imagemin')
const pngquant = require('imagemin-pngquant')
const spinner = ora('building....')
const question = [
{
type: 'input',
name: 'commitMessage',
message: 'Please input commit message:',
validate(val) {
if(val === ''){
return 'commit messag is required'
}
return true
}
}
]
prompt(question).then(({commitMessage}) => {
spinner.start()
webpack(webpackConfig, (err, stats) => {
spinner.stop()
if(err) throw err
if(stats.hasErrors()) {
console.log(chalk.red('build failed with errors \n'))
process.exit(1)
}
// 压缩 css 文件
gulp.task('css', function () {
gulp.src('src/css/*.css')
.pipe(minifyCSS())
.pipe(gulp.dest('dist/css'))
})
// 压缩images下的所有图片
gulp.task('image', function(){
return gulp.src('src/images/*.*')
.pipe(imagemin({
progressive: true,
svgoPlugins: [{
removeViewBox: false
}],
use: [pngquant({
quality: '100'
})]
}))
.pipe(gulp.dest('dist/images'))
})
// 定义默认任务，默认任务依赖css任务和image任务
gulp.task('default', ['css', 'image'], function() {
// 任务完成后，提交到git上
git.add(['-A'])
.commit(commitMessage)
.push('origin', branch.sync())
})
// 启动任务
gulp.start('default')
})
})
修改package.json
"scripts": {
"build": "node build.js"
},
结语
能用自动化完成的事情就不要手动，所以我们在开发中遇到一些比较机械化，步骤繁多，比较耗时的一些任务的时候，我们应该考虑怎么使用代码完成自动化。上面的例子，大家可以参考下，根据自己的情况修改然后就可以实现一键完成打包&优化&上传git了，是不是感觉很方便。