前端自動化

大雄沒了哆啦A夢發表於2018-09-27
前端

前言

最近在做一個需求，由於我們是打包後形成靜態檔案然後提交到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了，是不是感覺很方便。

相關文章