哈喽你们好，我依旧是那个可爱的蛙人。vue
我在北京某个角落和某人苦苦逼逼在写码，你在那里过得好的嘛，某人会给你加需求嘛。npm
话很少说，直接楼代码。gulp
演示
咱们先来演示一下完整效果ui
我写这个例子呢，就是我在写vue项目中，每次建立一个文件还得手动敲<template> <script> <style>标签，这样就很繁琐。我最近呢也在捣鼓Gulp发现它还能这样玩，"输出文件"，"模板注入"。若是对这个demo感兴趣的小伙伴继续往下看，我贴上代码。url
配置环境
若是还没装Gulp环境，请到这里Gulp官网安装，下面我来讲一下用到的gulp插件.net
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
这个文件是个空文件就行插件