Fatal编程技术网
  • deployment/
  • Deployment 更少的部署和构建自动化

Deployment 更少的部署和构建自动化

deployment less

Deployment 更少的部署和构建自动化,deployment,less,build-automation,Deployment,Less,Build Automation,我一直想学习web开发中的构建自动化，因为我在构建Android应用程序方面只有ANT的实际经验 我想构建利用较少的网站，但我看不到如何实现这一点，因为在开发中使用嵌入式JS方法并在部署时较少编译为CSS是一种很好的做法，但我不知道有什么好的方法可以匹配构建脚本中jess.JS的较少链接和JS包含。e、 g 替换： ... html ... <link rel="stylesheet/less" type="text/css" href="styles.less" /> <s

我一直想学习web开发中的构建自动化，因为我在构建Android应用程序方面只有ANT的实际经验

我想构建利用较少的网站，但我看不到如何实现这一点，因为在开发中使用嵌入式JS方法并在部署时较少编译为CSS是一种很好的做法，但我不知道有什么好的方法可以匹配构建脚本中jess.JS的较少链接和JS包含。e、 g

替换：

... html ...

<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="less.js" type="text/javascript"></script>

... html ...

。。。html。。。
... html。。。
与：
我希望我提到的有道理

有用的

如果有人能给我一些建议，我将不胜感激。

没有任何构建脚本能够像您的示例中那样将css文件与js文件合并。它们是两种完全不同的语言，服务于两种完全不同的需求，它们需要彼此分开。最后，正如Less一样，将Less文件合并到js文件中是没有意义的

此外，最佳实践建议将css链接放在文档的开头（正如Steve Souders所建议的），并将javascript代码放在文档末尾，就在结束正文标记之前（同样是Steve Souders，）。 如果您遵循这些规则（这是对性能的强烈建议），您最终将在html中远离js脚本放置css链接，如下所示：

<html>
  <head>
     <link rel="stylesheet/less" type="text/css" href="styles.css" />
  </head>
  <body>

  ....here goes the content of the page

    <script type="text/css" src="scripts.js"></script>
  </body>
</html>
在文档的头部，您将无法看到任何更改，因为浏览器无法理解.less文件。这些文件需要在css中进行预处理和“翻译”，以便浏览器可以解析它们并将给定的样式应用于HTML页面。因此，您将把（.less）文件运行到一个预处理器中，该预处理器将输出一个css文件。因此，您的
将是：

<head>
  <link type="text/css" href="css/reset.css" />
  <link type="text/css" href="css/styles.css" />
</head>

<head>
  <link type="text/css" href="css/main.css" />
</head>
请注意，HTML中将不会引用styles.less文件，而只引用其CSS对应文件styles.CSS。当你对你的布局感到满意时，是时候继续前进了

现在是构建脚本真正发挥作用的好地方。 构建脚本将（除其他外）连接相同类型的外部文件。 在这种情况下，它将能够将这两个文件合并到一个文件中。您的新
将是：

<head>
  <link type="text/css" href="css/reset.css" />
  <link type="text/css" href="css/styles.css" />
</head>

<head>
  <link type="text/css" href="css/main.css" />
</head>
底部的js文件也会发生同样的情况。发件人：

 <script src="one.js" type="text/javascript"></script>
 <script src="two.js" type="text/javascript"></script>
 <script src="three.js" type="text/javascript"></script>
致：
正如我所说的，这是一个使用Less（或Sass/Scss，或手写笔）和构建脚本的非常基本、粗略的工作流示例。我要说的是，Paul Irish在视频中给出了构建脚本的最简单、最清晰的表示，我强烈建议这样做，特别是因为它采用了HTML5样板，正如您在问题中提到的那样

希望这有助于您更好地理解，如果您有任何疑问，请告诉我。

我是Less.js的核心团队成员。如果可以避免，请不要使用LESS的浏览器版本（例如，您可能允许用户在浏览器中实时编辑“主题”…但除非您正在这样做，否则请避免使用浏览器版本）

尝试使用此生成工具将Less编译为CSS:。建议的做法是将LESS预编译为CSS，而汇编样式可以轻松创建LESS/CSS文件的“捆绑包”或多个版本，并且您可以添加一个监视任务，以便在处理LESS文件时，它们会自动编译为CSS

在开发过程中，更少的代码被编译成CSS，您就可以将精力集中在如何在生产中处理CSS上（甚至不必考虑更少的代码）。有道理？如果你有任何问题，我很乐意帮助你

如果您熟悉
npm
，那么这很容易使用。只需执行
npm安装组装样式

然后按照自述文件上的说明进行操作。

感谢您花时间以如此详细的方式回答我的问题，并为我指出一些有用的资源，即构建脚本视频。我想你误解了我想做的事。。这就是了解其他人如何部署应用程序并使用更少的资源。我将更新我的问题以使其更清楚。感谢您的回答-我没有任何节点经验，目前也没有任何构建部署经验。我会查看你推荐的链接，看看我能找到什么。没问题，我希望它有用 
 <script src="scripts.js" type="text/javascript"></script>