Visual Studio 2017搭建常规Web站点及构建需求入门咨询

Hey there! 作为有20年Web开发经验的老炮儿，转用新工具确实需要个清晰的入门路径，我来一步步帮你搞定VS2017里的所有需求：

第一步：选对项目类型（别被陌生语言吓跑） #

你打开VS2017新建项目时，直接搜**「ASP.NET Empty Web Site」**——这个项目类型完全是个“空白画布”，不会强制你用任何陌生语言，完美适配HTML、PHP、CSS、JS这些你熟悉的技术栈。创建后你可以自由添加Bootstrap文件、自己的代码文件，完全按你的习惯组织结构。

如果需要更偏向纯静态的选项，也可以搜**「HTML Empty Web Site」**，功能类似，选哪个都不影响后续配置。

第二步：搞定SCSS支持（替代Koala的编译功能） #

VS里有个超好用的扩展叫Web Compiler，完全能替代Koala处理SCSS编译：

1. 打开VS的「工具」→「扩展和更新」，搜索并安装Web Compiler
2. 在项目里新建SCSS文件（比如src/scss/custom.scss）
3. 右键SCSS文件，选「Web Compiler」→「Configure Compiler」
4. 在弹出的compilerconfig.json里配置输出路径和压缩规则，比如：

   [
     {
       "inputFile": "src/scss/custom.scss",
       "outputFile": "dist/assets/css/custom.css",
       "options": {
         "minify": false, // 日常编辑不压缩，保留原始CSS方便调试
         "sourceMap": true
       }
     },
     {
       "inputFile": "src/scss/custom.scss",
       "outputFile": "dist/assets/css/custom.min.css",
       "options": {
         "minify": true, // 生成压缩版，用于发布
         "sourceMap": false
       }
     }
   ]
   

5. 保存配置后，每次修改SCSS并保存，VS会自动生成对应的普通版和压缩版CSS，完全不用手动操作。

第三步：实现CSS/JS打包（Bundle） #

用Bundler & Minifier扩展就能搞定按需打包：

1. 同样在「扩展和更新」里安装Bundler & Minifier
2. 右键项目→「添加」→「新建项」，搜「Bundle Config File」，创建bundleconfig.json
3. 在配置文件里定义打包规则，比如把Bootstrap和自定义CSS打包成一个文件：

   [
     {
       "outputFileName": "dist/assets/css/bundle.min.css",
       "inputFiles": [
         "dist/assets/css/bootstrap.css",
         "dist/assets/css/custom.css"
       ],
       "minify": {
         "enabled": true
       }
     },
     {
       "outputFileName": "dist/assets/js/bundle.min.js",
       "inputFiles": [
         "src/js/jquery.js",
         "src/js/bootstrap.js",
         "src/js/custom.js"
       ],
       "minify": {
         "enabled": true
       }
     }
   ]
   

4. 右键bundleconfig.json→「Update Bundles」就能手动触发打包，也可以在扩展设置里开启“保存时自动更新”，或者配置成仅发布时打包（在发布配置里勾选“Run bundler & minifier on build”）。

第四步：仅发布时压缩HTML/CSS/JS（保留原始文件编辑） #

按上面的配置，我们已经把原始文件放在src目录，生成的压缩/打包文件放在dist目录：

• 日常编辑只碰src里的HTML、PHP、SCSS、JS原始文件
• 发布时，在VS的发布配置里，设置只发布dist目录、src里的PHP/HTML文件（跳过SCSS和未压缩的JS/CSS）
• HTML压缩的话，可以安装HTML Minifier扩展，配置它只在发布时生成压缩版HTML到dist目录，同样保留src里的原始HTML用于编辑。

第五步：资源版本控制（Timestamp替换） #

你之前用PHP的filemtime配合.htaccess的方式完全可以继续用，VS对PHP文件的编辑和运行完全支持：

1. 先安装PHP Tools for Visual Studio扩展（免费社区版），然后下载PHP Windows版本，在VS的「工具」→「选项」→「PHP Tools」里配置PHP路径
2. 在PHP页面里继续用熟悉的写法：

   <link href="/dist/assets/css/bundle-<?php echo filemtime($_SERVER['DOCUMENT_ROOT'].'/dist/assets/css/bundle.min.css'); ?>.css" rel="stylesheet">
   

3. 配合.htaccess的重写规则，把带Timestamp的URL指向实际的压缩文件：

   RewriteEngine On
   RewriteCond %{REQUEST_FILENAME} !-f
   RewriteRule ^(.*)-[0-9]+\.(css|js)$ $1.$2 [L]
   

这样就能实现缓存更新的效果，和你之前的工作流完全一致。

最后小提示 #

这些扩展都是可视化配置为主，对你这种有经验的开发者来说上手超快，先从一个小型Demo项目试起，慢慢熟悉VS的操作逻辑就行——毕竟核心还是你熟悉的Web开发技术，VS只是给你提供了更集成化的工具链。

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