.NET Core 1.x如何按控制器动作/视图打包不同JS和CSS文件？

当然可行！在.NET Core 1.x里，你可以借助前端构建工具（比如Gulp或Webpack）来实现这种按需组合的打包需求，而且完全能在构建阶段完成。下面给你两种常用的实现思路：

方案一：使用Gulp实现打包 #

Gulp是当时.NET Core项目中很流行的自动化构建工具，配合gulp-concat和gulp-uglify插件就能轻松完成合并压缩：

1. 初始化前端依赖
   在项目根目录创建package.json，添加所需依赖：

   {
     "devDependencies": {
       "gulp": "^3.9.1",
       "gulp-concat": "^2.6.1",
       "gulp-uglify": "^3.0.2"
     }
   }
   

   然后运行npm install安装依赖。

2. 编写Gulp任务
   创建gulpfile.js，定义两个打包任务，分别组合不同的JS文件：

   var gulp = require('gulp');
   var concat = require('gulp-concat');
   var uglify = require('gulp-uglify');
   
   // 打包site.js + action1.js
   gulp.task('bundle-action1', function() {
     return gulp.src([
       './wwwroot/js/site.js',
       './wwwroot/js/action1.js'
     ])
     .pipe(concat('site-action1.bundle.min.js'))
     .pipe(uglify())
     .pipe(gulp.dest('./wwwroot/js/bundles/'));
   });
   
   // 打包site.js + action2.js
   gulp.task('bundle-action2', function() {
     return gulp.src([
       './wwwroot/js/site.js',
       './wwwroot/js/action2.js'
     ])
     .pipe(concat('site-action2.bundle.min.js'))
     .pipe(uglify())
     .pipe(gulp.dest('./wwwroot/js/bundles/'));
   });
   
   // 默认任务：执行所有打包任务
   gulp.task('default', ['bundle-action1', 'bundle-action2']);
   

3. 绑定到.NET Core构建流程
   在项目的.csproj文件中添加构建事件，让Gulp任务在项目构建时自动执行：

   <Target Name="PreBuild" BeforeTargets="PreBuildEvent">
     <Exec Command="npm install" WorkingDirectory="$(ProjectDir)" />
     <Exec Command="gulp default" WorkingDirectory="$(ProjectDir)" />
   </Target>
   

4. 在视图中引用对应打包文件
   Action1的视图中引用：

   <script src="~/js/bundles/site-action1.bundle.min.js"></script>
   

   Action2的视图中引用：

   <script src="~/js/bundles/site-action2.bundle.min.js"></script>
   

方案二：使用Webpack实现打包 #

如果你更倾向于模块化的打包方案，Webpack也是不错的选择：

1. 初始化Webpack依赖
   修改package.json添加Webpack相关依赖：

   {
     "devDependencies": {
       "webpack": "^3.12.0",
       "webpack-cli": "^2.1.5"
     }
   }
   

   运行npm install安装。

2. 编写Webpack配置文件
   创建webpack.config.js，配置两个入口点分别对应不同的JS组合：

   module.exports = {
     entry: {
       'site-action1': ['./wwwroot/js/site.js', './wwwroot/js/action1.js'],
       'site-action2': ['./wwwroot/js/site.js', './wwwroot/js/action2.js']
     },
     output: {
       filename: '[name].bundle.min.js',
       path: __dirname + '/wwwroot/js/bundles'
     },
     mode: 'production'
   };
   

3. 绑定到构建流程
   同样在.csproj中添加构建事件：

   <Target Name="PreBuild" BeforeTargets="PreBuildEvent">
     <Exec Command="npm install" WorkingDirectory="$(ProjectDir)" />
     <Exec Command="webpack" WorkingDirectory="$(ProjectDir)" />
   </Target>
   

4. 视图引用打包文件
   和Gulp方案一样，Action1视图引用site-action1.bundle.min.js，Action2视图引用site-action2.bundle.min.js。

注意事项 #

• 确保你的项目已经安装了Node.js，因为Gulp和Webpack都依赖Node环境。
• 如果需要更复杂的打包逻辑（比如处理ES6+语法），可以额外添加对应的插件（如Babel）。
• .NET Core 1.x本身没有内置的打包工具，所以必须借助前端构建工具来实现这类需求。

内容的提问来源于stack exchange，提问作者AngryHacker