Tengo esta aplicación que a través de grunt ejecuta algunas tareas que devuelven scripts y los coloca en una carpeta específica. Ahora quiero agregar una tarea que se ejecute y compile un archivo vue y devuelva el script de resultado en la misma carpeta de destino. He intentado seguir esta guía -> 'https://gregtyler.co.uk/blog/vuejs-browserify-grunt?fbclid=IwAR3T_r07EFQywvZJYpBMAmaVebRdN2kHq29uDYy4KV45EGcfCvrAm6FnFg8'

Pero los resultados finales ejecutan la tarea, pero no se genera el script de devolución y tampoco existe el mensaje de devolución de tareas. solo dice "hecho"

ver resultado aquí

Este es mi archivo gruñido. La aplicación usa el complemento 'load-grunt-config' para dividir mis tareas por archivo en la carpeta 'grunt'.

 /*global module, require*/ module.exports = function(grunt) { // Get the version of the component from the package.json file. var package = require('./package.json'); var componentVersion = package.version; var componentName = package.name; require('load-grunt-config')(grunt, { config: { // When changing version, don't forget to change version in the js too (the version number sent to analytics)! componentVersion: componentVersion, componentName: componentName, componentPath: 'dist/resources/' } }); };

Este es el archivo en la carpeta grunt. El archivo es equivalente a mi nueva vue-task

 module.exports = { browserify: { bundle: { src: './js/index.js', dest: '<%= componentPath %>/<%= componentName %>.<%= componentVersion %>-new.min.js' }, options: { browserifyOptions: { debug: true }, transform: [ ['vueify'] ] } } }

mi paquete.json

 { "name": "******", "version": "1.2.8", "browser": { "vue": "vue/dist/vue.common.js" }, "dependencies": { "angular": "1.6.4", "browserify": "^17.0.0", "vue": "^2.6.14", }, "devDependencies": { "copyfiles": "1.2.0", "grunt": "^1.4.1", "grunt-browserify": "^6.0.0", "grunt-contrib-less": "1.3.0", "grunt-contrib-requirejs": "1.0.0", "load-grunt-config": "0.19.2", "npm-html2js": "^0.1.8", "rimraf": "2.5.4", "vueify": "^9.4.1" }, "scripts": { "build": "npm run clean && npm run html2js && npm run build:js && npm run copy:mgnl && npm run copy:assets && node node_scripts/addVersion.js && rimraf build && npm run compress", "build:dev": "npm run clean && npm run html2js && npm run build:jsdev && npm run copy:mgnl && npm run copy:assets && node node_scripts/addVersion.js && rimraf build", "clean": "rimraf dist && rimraf build && mkdir build && mkdir dist && mkdir dist/stores-and-retailers", "html2js": "npm-html2js -i 'js/*.html' -o 'build/templates.js'", "build:js": "grunt build", "build:jsdev": "grunt build:dev", "compress": "tar -C dist -zcf dist/stores-and-retailers.tar.gz stores-and-retailers", "copy:mgnl": "copyfiles -u 1 'mgnl/**/*' dist/stores-and-retailers", "copy:assets": "copyfiles -u 1 'assets/**/*' dist/stores-and-retailers/assets/", "deploy-build": "npm run build", "deploy-build:dev": "npm run build:dev", } }

archivo index.js

 const Vue = require('vue'); import StoresAndRetailersMap from './components/StoresAndRetailersMap.vue' new Vue({ el: '#storesAndRetailers', render: (createElement) => createElement(StoresAndRetailersMap) });

este es el componente vue que me gustaría compilar y usar

 <template> <div> <p> {{ msg }} </p> </div> </template> <script> export default { name: 'StoresAndRetailersMap', props:{ }, data(){ return { msg: "hello world" } }, methods:{ }, created(){ } }