哈嘍大家好，我依舊是那個可愛的蛙人。
我在北京某個角落和某人苦苦逼逼在寫碼，你在那里過得好的嘛，某人會給你加需求嘛。
話不多說，直接樓代碼。
演示
我們先來演示一下完整效果
演示
我寫這個例子呢，就是我在寫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
這個文件是個空文件就行
