不同环境下自动切换到缩小的 CSS 和 JS 文件答案

【问题标题】：Automatically switching to minified CSS & JS files in different environments不同环境下自动切换到缩小的 CSS 和 JS 文件
【发布时间】：2015-05-01 07:17:18
【问题描述】：

我正在使用 ASP.Net MVC 5 并利用 WebEssentials LESS 和 bundle 功能。

WebEssentials 设置为在保存时创建缩小的 css 和 js 文件。这是我想要的功能，因为我可以监控输出并缩短应用程序启动时间（不使用 Asp.Net MVC 包）。

如何让我的应用在部署时自动使用文件的缩小版本，而无需手动更改文件名？

所以，例如，来自：

<link href="somestyles.css" .. >

到：

<link href="somestyles-min.css" .. >

我确实读到我可以结合 WebEssentials 和 Asp.Net MVC 包，前提是我禁用了 Asp.Net MVC 包中的缩小选项。然后，这将替换生产中的 MIN 文件 (web.config [debug="false"])。

这是我唯一的选择还是有更好的方法来实现这一点？

【问题讨论】：

标签： asp.net-mvc asp.net-mvc-5 bundling-and-minification web-essentials

【解决方案1】：

这绝对不是唯一的方法。另一种方法是完全断开所有基于 Microsoft 的工具（即捆绑、网络必需品等）并使用 Javascript 任务运行程序。然后，超集和预处理器的编译、缩小和任何其他前端繁重的工作都可以在一个地方进行。也可以基于环境。

让我们来解决您的一些具体问题。

以 nodejs 和 gulp 风格运行的任务

下载nodejs

下载后，打开命令提示符并导航到您的项目源。例如：

cd "C:\Users\beloud\Documents\Visual Studio 2013\Projects\YourProject"

通过运行npm init 初始化节点项目。这会问你一堆关于你的项目的问题。完成后，它将创建一个文件package.json，它将跟踪您的节点依赖关系和项目详细信息。
现在我们需要安装一些软件包。在命令提示符下，输入以下命令：
```
npm install gulp -g 
npm install gulp --save-dev
npm install gulp-less --save-dev
npm install gulp-minify-css --save-dev
npm install gulp-if --save-dev
```
我们全局安装 gulp，所以我们可以在任何地方使用它（它会为你添加一个路径）。然后我们在本地安装一些包到我们的项目中，这些包将执行实际工作（缩小、处理等）。
在与您的package.json 相同的目录中创建一个名为gulpfile.js 的文件。

现在我们需要创建我们的实际任务。在gulpfile.js 中，添加以下内容：

//these are the modules that we'll be using in our task
var gulp = require('gulp'),
    less = require('gulp-less'),
    gulpif = require('gulp-if'),
    minifycss = require('gulp-minify-css');

var isDebug = true; // I usually have a config.js file that has this and some handy static paths that I'll be referencing regularly. Then I just require it above.
gulp.task('default', function() {
  return gulp.src('Content/less/**/*.less')
    .pipe(less())
    .pipe(gulpif(isDebug === false, minifycss()))  //the first argument is the condition, the second is the method to call if the condition is true
    .pipe(gulp.dest('Content/css'));
});

在命令提示符下运行 gulp。这将运行default 任务。基本上，它将在Content/less下的所有目录中查找任何较少的文件，将它们编译为css，如果isDebug是false，则将它们缩小并输出到Content/css。
让我们通过添加手表让它变得更棒一点。将以下内容添加到gulpfile.js：
```
gulp.task('watch', function() {
  // Watch .less files
  gulp.watch('Content/less/**/*.less', ['default']);
});
```
运行 gulp 后，任务将保持活动状态，直到手动终止。它将监视对Content/less 中任何较少文件的更改，并在保存更改后重新运行任务。
现在，您只需要包含 css 文件的名称，因为无论环境如何，它都将保持不变。

这是使用任务运行器来实现您想要做的事情的一个非常基本的示例。你可以用 nodejs、gulp 和我提到的所有东西做更多的事情。我个人建议这样做，因为它比您当前使用的一次性工具更强大，而且 Visual Studio 2015 已经严重依赖这种新方法，因此您很可能无论如何都必须学习这一点。

您可以通过遵循Getting started with gulp、Mark Goodyear 提供的这个非常棒的教程来了解更多信息。

【讨论】：

如果反对者分享原因，我很高兴听到如何改进我的答案:)
我喜欢这个答案。只是补充。 WebEssentials 不再支持在 VS2015 中编译文件。顺便说一句，如果我有 js 文件，例如 jquery、foundation.js、react.js 文件。是否建议将它们组合在一个文件中，例如 lib.min.js，或者最好将它们分开并逐行包含在 html 文件中？
这取决于你的最终目标@Daskul。是否所有的库都在你的足够多的页面上被使用来请求捆绑？您是否在每次页面加载时发出大量请求？像这样的问题应该决定你是否捆绑。
好的，我明白了，如果我确定这些库是全球使用的或至少大多数页面，然后将它们编译到一个文件中，对吗？但是我应该什么时候开始重新考虑性能呢？我的意思是，有多少页面请求/秒或分钟将开始显着？

【解决方案2】：

在下一个 Visual Studio 中添加了对 Grunt（和 gulp）的支持。这是用于做同样事情的 javascript 开发人员工具 - 捆绑生产。

Grunt 可以创建一个不为测试而缩小但为生产而缩小的构建版本。我可能需要更多的时间和精力，但这是未来，而不是他们在捆绑方面所做的 MS 尝试。如果你已经安装了 Node.js 并为未来做好准备，你已经可以使用 grunt。

那里有很多getting started resource。另见Introducing Gulp, Grunt, Bower, and npm support for Visual Studio

【讨论】：

Visual Studio 不是必需的，您只需要在 Visual Studio 2015 中安装和预安装 node.js 并添加一些集成。

【解决方案3】：

这是我唯一的选择还是有更好的方法来实现这一点？

这不是您唯一的选择，但由于您在 MVC 领域工作，因此它是更好的选择之一。由于它被设计用于在不同级别（例如单个页面和布局）使用，因此它会负责生成适当的链接。

一般来说，我建议您使用面向 MVC 的服务器端捆绑框架，以便它可以处理链接生成并为您提供直观的 API。

SquishIt 是一个与 MVC 很好集成的开源框架，并且还能够根据调试标志等标准进行切换，以生成原始源代码与缩小版本。

SquishIt 和新的内置 MVC 包在它们要完成的任务方面非常相似。

【讨论】：