在不同的环境中自动切换到缩小的 CSS & JS 文件

Question

我正在使用 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"])。

这是我唯一的选择还是有更好的方法？

Answer 1

在下一个 Visual studio 中添加了 Grunt（和 gulp）支持。这是用于执行相同操作的 javascript 开发人员工具 - 生产捆绑。

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

有很多getting started resource out there. See also Introducing Gulp, Grunt, Bower, and npm support for Visual Studio

Answer 2

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

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

以 nodejs 和 gulp

的风格完成任务运行ning

下载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 下的所有目录中查找任何 less 文件，将它们编译为 css，如果 isDebug 为 false，则将它们缩小并输出到 Content/css.
让我们加一块手表让它更棒一点。将以下内容添加到 gulpfile.js:
```
gulp.task('watch', function() {
  // Watch .less files
  gulp.watch('Content/less/**/*.less', ['default']);
});
```
在运行宁 gulp 后，任务将保持活动状态，直到手动终止。它将监视对 Content/less 中任何 less 文件所做的更改，并会在保存更改后重新运行任务。
现在，您只需包含 css 文件的名称，因为无论环境如何，它都将保持不变。

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

您可以通过学习这个非常棒的教程来了解更多信息，Getting started with gulp, by Mark Goodyear。

Answer 3

Is this my only option or is there a better way to achieve this?

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

一般来说，我会推荐你使用面向MVC的服务器端捆绑框架，这样它就可以处理link代，并给你一个直观的API。

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

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

在不同的环境中自动切换到缩小的 CSS & JS 文件

Automatically switching to minified CSS & JS files in different environments

asp.net-mvc

asp.net-mvc-5

bundling-and-minification

web-essentials

以 nodejs 和 gulp