Hello everyone, I am still that lovely frogman.

I am writing code with someone in a corner of Beijing. If you have a good life there, someone will add demand to you.

No more words, just code.

demo

Let’s show you the full effect

For this example, I’m writing a Vue project where I have to manually type the

Configure the environment

If you have not installed Gulp, please go to the Gulp official website to install Gulp

NPM I gulp-inject --save template injection this template injection can only be injected according to the annotation position, so to inject must have the annotation position, NPM I gulp-replace --save // replace the content NPM I gulp-rename --save // change the file nameCopy the code

gulpFile.js

const { src, dest } = require('gulp'); const rename = require('gulp-rename'); Const inject = require('gulp-inject') // Template inject const replace = require('gulp-inject') // Replace content // create page function  createPage(cb) { const len = process.argv.length - 1 const pageName = process.argv[len].slice(2, Process.argv [len].length) // get the custom file name parameter SRC ('./template/template.vue') // find the template to inject. Pipe (rename(' ${pageName}.vue ')) // Pipe (inject(SRC ('./template/index.vue'), {// here index.vue is an empty file startTag: '// start', endtag: '// end', Transform () {return '<template> <div id="${pageName}"><div> // Current file name as id </template>'}})).pipe(replace('// Start ', ')) // replace the comment with null. Pipe (replace('// end', Pipe (dest(__dirname + '/dist')) cb()} exports.page = createPage // Export taskCopy the code

template/template.vue

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

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

</style>
Copy the code

template/index.vue

This file is an empty file

If you think it’s good, give it a thumbs up!

You can also add my wechat to communicate