asp.net-mvc – 在不同环境中自动切换到缩小的CSS和JS文件

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

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

这绝对不是唯一的方法.另一种方法是完全断开所有基于Microsoft的工具(即捆绑,Web要素等)并使用Javascript任务运行器.然后编译超集和预处理器,缩小和任何其他前端重物可以在一个地方.它也可以基于环境.

因此,让我们解决您的一些具体问题.

任务以nodejs和gulp的风格运行

>下载nodejs
>下载后,打开命令提示符并导航到项目源.例如：

cd "C:UsersbeloudDocumentsVisual Studio 2013ProjectsYourProject"

>通过运行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.那将运行默认任务.基本上,它将在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已经在很大程度上依赖于这种新方法,所以你很可能不得不学习这一点.

您可以在Mark Goodyear之前按照这个真正令人惊叹的教程Getting started with gulp了解更多信息.