A Gulp plugin that let's you build single file components (as made famous by Vue) and use them in other environments by splitting the vue-files into separate files.
License: MIT License
Hi, I'm trying to run the sample from the doc, but have an error. Please help case it does exactly what i need. Thanks
$ npm i gulp --save-dev gulp-single-file-components
npm WARN deprecated [email protected]: gulp-util is deprecated - replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5
npm WARN deprecated [email protected]: please upgrade to graceful-fs 4 for compatibility with current and future versions of Node.js
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
npm WARN deprecated [email protected]: please upgrade to graceful-fs 4 for compatibility with current and future versions of Node.js
npm WARN deprecated [email protected]: This module relies on Node.js\'s internals and will break at some point. Do not use it, and update to [email protected].
npm WARN deprecated [email protected]: ๐
npm WARN [email protected] No description
npm WARN [email protected] No repository field.
+ [email protected]
+ [email protected]
updated 2 packages in 12.463s$ gulp components
[21:46:21] Using gulpfile ~/npm-test/gulpfile.js
[21:46:21] Starting 'components'...
(node:9701) UnhandledPromiseRejectionWarning
(node:9701) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 2)
(node:9701) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.But if there is no .vue file's everything is ok =)
$ npm run gulp components
> [email protected] gulp /home/zeka/npm-test
> ./node_modules/gulp/bin/gulp.js "components"
[21:39:23] Using gulpfile ~/npm-test/gulpfile.js
[21:39:23] Starting 'components'...
[21:39:23] Finished 'components' after 7.67 msMight be helpful
$ npm --version
6.0.0
Update:
I've updated gulp to 4.0.0 and then, magic, it told what I need to do:
```bash
[20:41:41] Error in plugin 'gulp-single-file-components'
Message:
In file components/test.vue:
You are trying to use "babel". babel-preset-es2015 and babel-plugin-transform-runtime are missing.
To install run:
npm install --save-dev babel-preset-es2015 babel-plugin-transform-runtime
Details:
domainEmitter: [object Object]
domain: [object Object]
domainThrown: false
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] gulp: `./node_modules/gulp/bin/gulp.js "components"`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] gulp script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/zeka/.npm/_logs/2018-05-06T17_41_41_898Z-debug.log
So, after I installed components npm install --save-dev babel-preset-es2015 babel-plugin-transform-runtime then everything built. Even when I downgraded to 3.9.1.
So the problem is that built in npm helper doesn't work with 3.9.1
Hi, if I want to use my own compiler to handle the contents of the script tag, but I do not want to specify the script's lang. what should I do๏ผ
I found this writing is invalid.
components({
customCompilers: {
script: function (content, cb, compiler, filePath) {
// It does not work
cb(null, content)
},
pug: function (content, cb, compiler, filePath) {
content = pug.render(content, {doctype: 'html'})
cb(null, content)
}
}
}
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google โค๏ธ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.