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

大声

我正在使用ASP.Net MVC 5,并且还利用WebEssentials LESSbundle功能。

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文件

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

凯莉·肯德尔(Carrie Kendall)

这绝对不是唯一的方法。另一种方法是完全断开所有基于Microsoft的工具(即捆绑,Web Essentials等)并使用Javascript Task Runner。然后可以将超集和预处理器的编译,最小化以及任何其他前端繁琐的工作放在一个地方。它也可以基于环境。

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

以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,如果isDebugfalse则将其最小化,然后输出至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已经非常依赖这种新方法,因此您很有可能无论如何都要学习这一点。

你可以学习按照此真的很神奇教程多,开始使用一饮而尽,由马克·固特异

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Rails-自动将环境切换到生产

来自分类Dev

Rails-自动将环境切换到生产

来自分类Dev

在Windows 8.1中登录后自动切换到桌面

来自分类Dev

如何在PHP Storm 10.0.3中启用.js和.css文件的自动最小化?

来自分类Dev

VS 2015自动切换到GIT

来自分类Dev

切换到电池时自动关闭

来自分类Dev

切换到自动登录TTY

来自分类Dev

如何在Windows中临时切换到无头环境?

来自分类Dev

避免在再次打开文件夹时自动切换到其他虚拟桌面

来自分类Dev

避免在打开文件时自动切换到其他虚拟桌面

来自分类Dev

避免自动从动态表引用切换到工作表和范围

来自分类Dev

切换到其他文件系统

来自分类Dev

从开发环境切换到生产环境时,使用grunt切换HTML元素

来自分类Dev

如何在Linux Fedora中禁用自动切换到睡眠模式?

来自分类Dev

使用python中的子过程自动从普通用户切换到root用户

来自分类Dev

网络设置在 VMWare Player 中自动切换到桥接

来自分类Dev

如何将Resque环境从开发切换到测试?

来自分类Dev

在JavaScript中从输入切换到按钮

来自分类Dev

切换到Outlook中的完整视图

来自分类Dev

RDP启动最小化,无法切换到

来自分类Dev

切换到不同的监视器屏幕尺寸时WPF中的对象变形

来自分类Dev

制作按钮列表视图,这些按钮可切换到kivy中的不同屏幕

来自分类Dev

选择不同的应用程序时,如何阻止工作空间自动切换到其他工作空间?

来自分类Dev

调试后自动将XCode切换到Project Navigator

来自分类Dev

插入后如何自动切换到USB耳机?

来自分类Dev

从EF自动迁移切换到代码优先迁移

来自分类Dev

是否可以自动切换到HDMI声音输出?13.04

来自分类Dev

歌曲自动从暂停切换到播放按钮

来自分类Dev

是否可以自动切换到HDMI声音输出?13.04

Related 相关文章

  1. 1

    Rails-自动将环境切换到生产

  2. 2

    Rails-自动将环境切换到生产

  3. 3

    在Windows 8.1中登录后自动切换到桌面

  4. 4

    如何在PHP Storm 10.0.3中启用.js和.css文件的自动最小化?

  5. 5

    VS 2015自动切换到GIT

  6. 6

    切换到电池时自动关闭

  7. 7

    切换到自动登录TTY

  8. 8

    如何在Windows中临时切换到无头环境?

  9. 9

    避免在再次打开文件夹时自动切换到其他虚拟桌面

  10. 10

    避免在打开文件时自动切换到其他虚拟桌面

  11. 11

    避免自动从动态表引用切换到工作表和范围

  12. 12

    切换到其他文件系统

  13. 13

    从开发环境切换到生产环境时,使用grunt切换HTML元素

  14. 14

    如何在Linux Fedora中禁用自动切换到睡眠模式?

  15. 15

    使用python中的子过程自动从普通用户切换到root用户

  16. 16

    网络设置在 VMWare Player 中自动切换到桥接

  17. 17

    如何将Resque环境从开发切换到测试?

  18. 18

    在JavaScript中从输入切换到按钮

  19. 19

    切换到Outlook中的完整视图

  20. 20

    RDP启动最小化,无法切换到

  21. 21

    切换到不同的监视器屏幕尺寸时WPF中的对象变形

  22. 22

    制作按钮列表视图,这些按钮可切换到kivy中的不同屏幕

  23. 23

    选择不同的应用程序时,如何阻止工作空间自动切换到其他工作空间?

  24. 24

    调试后自动将XCode切换到Project Navigator

  25. 25

    插入后如何自动切换到USB耳机?

  26. 26

    从EF自动迁移切换到代码优先迁移

  27. 27

    是否可以自动切换到HDMI声音输出?13.04

  28. 28

    歌曲自动从暂停切换到播放按钮

  29. 29

    是否可以自动切换到HDMI声音输出?13.04

热门标签

归档