头图

哈喽大家好,我依旧是那个可爱的蛙人。

我在北京某个角落和某人苦苦逼逼在写码,你在那里过得好的嘛,某人会给你加需求嘛。

话不多说,直接楼代码。


演示

我们先来演示一下完整效果

我写这个例子呢,就是我在写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

这个文件是个空文件就行


觉得写的不错的话,那就点个赞叭!


秦声
334 声望2.4k 粉丝