我正在使用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捆绑包中的缩小选项。然后,这将替换生产(web.config [debug="false"]
)中的MIN文件。
这是我唯一的选择,还是有更好的方法实现这一目标?
这绝对不是唯一的方法。另一种方法是完全断开所有基于Microsoft的工具(即捆绑,Web Essentials等)并使用Javascript Task Runner。然后可以将超集和预处理器的编译,最小化以及任何其他前端繁琐的工作放在一个地方。它也可以基于环境。
因此,让我们解决您的一些具体问题。
下载后,打开命令提示符并导航到项目源。例如:
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已经非常依赖这种新方法,因此您很有可能无论如何都要学习这一点。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句