Vueify + Gulp：改进CSS处理
Vue的单文件模板语法为任务运行者创build了一个独特的难题，因为在单个文件中发现了两个单独的pipe道（JS和CSS）。
现在我知道使用Browserify的命令行工具，下面的工作：
browserify -t vueify -p [ vueify/plugins/extract-css -o dist/app.css ] -e src/index.js | uglifyjs -o dist/app.js 这将创build两个输出文件： app.css和app.js ，并且在浏览器中加载时，按预期显示我的组件样式
现在我想改进这个输出。 正如您在示例中所看到的，我将生成的JS传递给uglifyjs – 在准备生产时将其uglifyjs 。 但是没有这样的转换应用于CSS。 它没有被缩小，不必要的CSS不被删除，自动前缀不被执行等等。
由于NPM脚本只允许你运行一个单一的命令，在我看来，像我想要的那样，在一个命令行指令中是不可能的。 我需要一个命令来提取CSS和另一个来修改它 – Grunt / Gulp风格。
这让我看到了在我的项目中使用Gulp。
使用Vueify的extract-css插件，我可以将这个CSS转储到文件中，如下所示：
browserify('./main.js') .transform('vueify') .plugin('vueify/plugins/extract-css', { out: 'dist/bundle.css' }) .bundle()
这是直接从Vueify的文档 ，虽然他们提到，“也可以是一个可写的stream”，没有提供任何例子，这是什么意思，这个或如何做到这一点。
不过，这是我遇到第一个问题的地方。 这个小小的示例代码没有为我工作：
const gulp = require("gulp"); const browserify = require("browserify"); const source = require("vinyl-source-stream"); const buffer = require("vinyl-buffer"); gulp.task("default", function() { browserify("src/index.js") .transform("vueify") .plugin("vueify/plugins/extract-css", { out: "dist/app.css" }) .bundle() .pipe(source("app.js")) .pipe(buffer()) .pipe(gulp.dest("dist")); });
这个非常简单的例子（据我所知，做了和我的NPM脚本完全一样的东西）失败了，导致浏览器抛出以下错误：
[Vue warn]: Failed to mount component: template or render function not defined. found in ---> <Anonymous> <Root>
更糟糕的是，传递{debug: true}参数来查看可能出错的结果会产生一个无意义的源映射：
这看起来不像我的源代码：
我在做什么错了，为什么是一个非常简单的例子与extract-css失败？
更新
在过去的一周里，我一直在试着用不同的JavaScript打包器来迭代各种实验并构build工具，尽pipe提供了奖励，但我的各种StackOverflow问题并没有得到答案，所以在4-5天没有回应，也没有解决scheme一直在拆除项目，继续前进。
这意味着为了拉起源代码并展示我上次做了什么，我必须重新克隆回购或重新运行任何Yeoman命令，并回到我原来的破碎状态。
在这个特定的问题的情况下，从我的“如何repro”记事本文件的确切步骤，它没有repro。 我做了很多实验，发现了一些事情。
首先，我所有的源文件：
资源
index.html的：
<html> <head> <link rel="stylesheet" href="/app.css" /> </head> <body> <div id="app"></div> <script src="/app.js"></script> </body> </html>
index.js：
const Vue = require("vue"); const VueRouter = require("vue-router"); const App = require("./App.vue"); Vue.use(VueRouter); const router = new VueRouter(require("./router")); const app = new Vue({ el: "#app", render: function(create) { create(App); } });
路由器/ index.js：
export default {routes: []};
App.vue：
<template> <div id="app"> <p>Test</p> </div> </template> <script> export default { }; </script> <style lang="sass" scoped"> #app { background-color: #f00; } </style>
调查
正如我所提到的，这之前就抛出了一个错误，但现在它完美地工作了。 做一些调查，首先是被抛出的错误：
Failed to mount component: template or render function not defined.
使用Vue Runtime而不是Vue Compiler时，最可能导致这个错误
这就是说，这不是我的情况。 因为我没有使用模板，所以我使用了一个渲染函数 – 它是存在的（并且在使用来自命令行的browserify时工作）。 相反，奇怪的源地图暗示我的问题可能已经生活的地方。 通过图片阅读更仔细，它试图加载vue-hot-reload-api 。 这是我开始尝试的一个工具，但是放弃了，因为它导致了我的问题。
我相信当我卸载这个模块时，我没有删除对它的所有引用，所以Browserify试图把它与其他所有东西捆绑在一起。 无法在node_modulesfind该模块，Browserify将默认假定它是一个外部模块，并将代码保留在上面所示的丑陋格式中。 事实上，这只发生在运行gulp时，而不是在运行命令行时发生，可以通过node_modules/.bin目录的内容来解释 – 如果在运行npm uninstall后它不同步。
我相信，如果我删除了我的node_modules文件夹并重新运行npm install ，问题就会自行解决。