asp.net-mvc - 不同环境下自动切换到缩小的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 Bundles，前提是我禁用了 Asp.Net MVC Bundles 中的缩小选项。然后这将替换生产中的 MIN 文件( web.config [debug="false"] )。

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

Answer 1

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

因此，让我们解决您的一些具体问题。

以 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 下的所有目录中查找任何 less 文件。 , 将它们编译为 css，如果 isDebug 将它们缩小是 false并将其输出到 Content/css .

让我们通过添加 watch 让它更棒一些。将以下内容添加到 gulpfile.js :

gulp.task('watch', function() {
  // Watch .less files
  gulp.watch('Content/less/**/*.less', ['default']);
});

运行 gulp 后，任务将保持事件状态，直到手动终止。它将监视对 Content/less 中的任何 less 文件所做的更改。并将在保存更改后重新运行任务。

现在，您只需要包含 css 文件的名称，因为无论环境如何，它都将保持不变。

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

您可以按照这个非常棒的教程了解更多信息， Getting started with gulp , 来自 Mark Goodyear .