Gulp還能這麼玩? 你知道嗎

哈嘍你們好，我依舊是那個可愛的蛙人。

我在北京某個角落和某人苦苦逼逼在寫碼，你在那裏過得好的嘛，某人會給你加需求嘛。

話很少說，直接樓代碼。

---

演示

咱們先來演示一下完整效果

我寫這個例子呢，就是我在寫vue項目中，每次建立一個文件還得手動敲<template> <script> <style>標籤，這樣就很繁瑣。我最近呢也在搗鼓Gulp發現它還能這樣玩，"輸出文件"，"模板注入"。若是對這個demo感興趣的小夥伴繼續往下看，我貼上代碼。

配置環境

若是還沒裝Gulp環境，請到這裏Gulp官網安裝，下面我來講一下用到的gulp插件

npm i gulp-inject --save // 模板注入 這種模板注入只能根據註釋位置來注入，因此想要注入必須有註釋位置，不懂的百度參考資料一大堆
npm i gulp-replace --save // 替換內容
npm i gulp-rename --save // 修改文件名稱

gulpFile.js

const { src, dest } = require('gulp');
const rename = require('gulp-rename');  // 修改代碼後綴
const inject = require('gulp-inject') // 模板注入
const replace = require('gulp-replace') // 替換內容

// 建立頁面
function createPage(cb) {
    const len = process.argv.length - 1
    const pageName = process.argv[len].slice(2, process.argv[len].length)  // 獲取自定義文件名稱參數
    src('./template/template.vue') // 找到要注入的模板
        .pipe(rename(`${pageName}.vue`)) // 替換成我們終端裏參數的名稱
        .pipe(inject(src('./template/index.vue'), { // 這裏的index.vue是個空文件就行
            starttag: '// start',
            endtag: '// end',
            transform() {
                return `<template>
    <div id="${pageName}"><div> // 當前文件名稱做爲標識id
</template>`
            }
        }))
        .pipe(replace('// start', ''))  // 將註釋替換爲空
        .pipe(replace('// end', ''))  // 將註釋替換爲空 
        .pipe(dest(__dirname + '/dist')) // 最後輸出到別的目錄中
    cb() 
}

exports.page = createPage  // 導出任務

template/template.vue

// start
// end
<script>
export default {
    data() {
        return {

        }
    },
    methods: {
        
    }
}
</script>
<style scoped lang="stylus">

</style>

template/index.vue

這個文件是個空文件就行

---

以爲寫的不錯的話，那就點個贊叭！