简体   繁体   English

如何在Visual Studio 2015中进行捆绑和缩小

[英]How to do Bundling and Minification in Visual Studio 2015

The APS.NET MVC project template that came with Visual Studio 2013 used bundling to send CSS and script files to the browser. Visual Studio 2013附带的APS.NET MVC项目模板使用捆绑将CSS和脚本文件发送到浏览器。

The ASP.NET MVC project template that comes with Visual Studio 2015 has stopped using it and inserts <link rel='stylesheet' ... > statements directly. Visual Studio 2015附带的ASP.NET MVC项目模板已停止使用它并直接插入<link rel='stylesheet' ... >语句。

What is the recommended best practice for Bundling and Minification? 捆绑和缩小的推荐最佳做法是什么?

There's an article about this - Where Did My ASP.NET Bundles Go in ASP.NET 5? 有一篇关于此的文章 - 我的ASP.NET捆绑包在ASP.NET 5中的位置? and What about Bundling and Minification . 捆绑和缩小怎么样?

Starting with ASP.NET 5, Microsoft is encouraging developers to start integrating some more popular web development tools that other web developers have been using: Gulp, npm, and bower. 从ASP.NET 5开始,Microsoft鼓励开发人员开始集成其他Web开发人员一直使用的一些更受欢迎的Web开发工具:Gulp,npm和bower。 Each of these tools has a specific purpose: 这些工具中的每一个都有特定的目的:

  • Gulp is a task-runner written in JavaScript that runs on top of the NodeJS framework and automates repetitive tasks Gulp是一个用JavaScript编写的任务运行器,它运行在NodeJS框架之上,可以自动执行重复性任务
  • npm is the Node Package Manager, and it can be used to deliver plugins and utilities that run in the NodeJS framework. npm是节点包管理器,它可用于提供在NodeJS框架中运行的插件和实用程序。
  • Bower is a package manager for delivering static resources from Git repositories. Bower是一个包管理器,用于从Git存储库提供静态资源。

These tools now allow you to bundle and minify your scripts and css: 这些工具现在允许您捆绑和缩小脚本和css:

All can be installed through npm. 所有都可以通过npm安装。

Example: 例:

var paths = {
    bower: "./bower_components/",
    lib: "./" + project.webroot + "/lib/",
    app: "./" + project.webroot + "/app/",
    dist: "./" + project.webroot + "/dist/"
};

var concat = require("gulp-concat"),
    rename = require("gulp-rename"),
    uglify = require("gulp-uglify");

gulp.task("bundle", function () {
    return gulp.src([
        paths.app + "menu.js",
        paths.app + "app.js"])
    .pipe(concat("all.js"))
    .pipe(gulp.dest(paths.dist))
    .pipe(rename("all.min.js"))
    .pipe(uglify())
    .pipe(gulp.dest(paths.dist));
});

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM