Javascript 只为开发导入

Question

我来自 Java 背景，在这种背景下，依赖于测试而不是生产是很常见的，但是，使用我发现很难理解如何使用 Java脚本和HTML.

我真的很想能够开发一些 javascript，在我开发（运行宁 gulp 服务）时只有运行s，然后当我运行 gulp 这些文件没有包含在 dist 中，但我找不到任何常用的方法。

到目前为止，我正在使用 yeoman 的 gulp-webapp。

这是没有完成的事情（生产版本中没有包含测试脚本），还是我缺少一些自动化来执行此操作？

Answer 1

这里有几个不同的解决方案：

Javascript/jQuery: 一种方法是，如 blex 所述，在始终加载的脚本中创建一个 DEBUG_MODE 布尔值，然后该脚本将在文档中插入更多脚本节点，这些节点将包含它认为适合加载的脚本。

例如：

if(DEBUG_MODE){
    for(var x=0; x<debuggingScripts.length; x++){
        InsertScript(debuggingScripts[x]);
    }
}

其中 debuggingScripts 是脚本 URL 数组，而 InsertScript() 是将脚本添加到 DOM 的方法。

Python/Cleaning 脚本： 我个人使用的另一种方法是使用一个脚本自动生成您网页的 "Production" 版本.例如，我有一个 Python 脚本，它将忽略我的开发 HTML 文件中包含在  和  注释中的任何代码。当我运行脚本时，它生成并打包我的代码的最新 "Release" 版本，没有任何在测试环境中存在的被忽略的代码。

PHP: 你也可以用 PHP （或任何其他 preprocessor/serverside 脚本）做类似的事情，其中 PHP 生成你的 header 会忽略特定数组中的某些 javascript URL，或者你会格式化它。

希望其中之一对您有所帮助！如果您需要比我提供的更多的示例代码，也请告诉我，我很乐意编写示例脚本。

Answer 2

就像命运和橡皮鸭调试一样，我想我已经找到了我难以捉摸的问题的答案。抱歉自我回答，但我把它放在这里是为了繁荣，所以其他人可以学习。

生成的gulp脚本使用useref，这意味着可以将注释放在html中以将文件组合在一起。但是，它也提供了使用以下语法删除这些文件的能力：

<!-- build:remove -->
<script src="/bower_components/jquery-mockjax/jquery-mockjax.js"></script>
<script src="scripts/mock.js"></script>
<!-- endbuild -->

所以现在我只是使用它，当我使用它时 gulp serve 它包含 javascript 文件，当我调用 gulp 时它们会被删除。

Javascript 只为开发导入

Javascript import just for development

javascript

dependencies

bower

gulp

wiredep