自动切换到不同环境中的缩小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 Bundle结合起来,只要我在Asp.Net MVC Bundles中禁用了缩小选项.然后,这将替换生产(web.config [debug="false"])中的MIN文件.

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

Answer 1

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

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

任务以nodejs和gulp的风格运行

1. 下载nodejs

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

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

3. 通过运行初始化节点项目npm init.这会问你一堆关于你的项目的问题.完成后,它将创建一个文件,package.json它将跟踪您的节点依赖项和项目详细信息.

4. 现在我们需要安装一些软件包.在命令提示符中,输入以下命令:

   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,因此我们可以在任何地方使用它(它将为您添加路径).然后我们在本地安装一些软件包到我们的项目中进行实际工作(缩小,处理等).

5. 在与package.json命名相同的目录中创建一个文件gulpfile.js.

6. 现在我们需要创建我们的实际任务.在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'));
   });
   

7. gulp在命令提示符下运行.那将完成default任务.基本上,它会在所有目录下查找任何更少的文件,将Content/less它们编译为css,如果isDebug是false,则将它们缩小并输出到Content/css.

8. 让我们通过添加手表让它变得更加精彩.将以下内容添加到gulpfile.js:

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

   运行gulp后,任务将保持活动状态,直到手动终止.它将监视对任何较少文件所做的更改Content/less,并将在保存的更改时重新运行该任务.

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

这是使用任务运行器来实现您正在尝试执行的操作的一个非常基本的示例.您可以使用nodejs,gulp以及我引用的其他所有内容来完成更多工作.我个人会建议这样做,因为它比你目前使用的一次性工具更强大,Visual Studio 2015已经在很大程度上依赖于这种新方法,所以你很可能不得不学习这一点.

您可以通过Mark Goodyear的这个非常棒的教程" gulp入门"了解更多信息.