Visual Studio 2017 中的 Gulp 与 Sass

在 Visual Studio 2017 中开启 gulp 自动化任务编译 sass 文件

## 环境

- Windows 10 v1803
- Visual Studio 2017 v15.9.4
- Node.js v10.6.0(VS自带版)
- npm v6.1.0(VS自带版, 未使用第三方源)

:warning: 全部使用默认安装路径 :warning:

## Visual Studio 2017 Gulp,Sass 自动化

在项目(ASP.NET MVC)根目录下创建 `package.json`

```json
{
  "private": true,
  "devDependencies": {
    "gulp": "4.0.0",
    "gulp-sass": "4.0.2"
  }
}
```

右键 `package.json` 执行`还原程序包` 实际上执行了`npm install`

![003.png](https://www.flysfeq.site/usr/uploads/2019/01/185476697.png)

输出窗口

![004.png](https://www.flysfeq.site/usr/uploads/2019/01/2922258223.png)

和 `gulpfile.js`

```javascript
/// <binding BeforeBuild='sass' />
// gulp > v4.0
var gulp = require("gulp"),
    sass = require("gulp-sass");

var styles = 'Styles/';

function style() {
    return gulp.src(styles + '*.scss')
        .pipe(sass())
        .pipe(gulp.dest('Statics/CSS'));
}

// 方便可以手动调用
gulp.task(style);

// 持续监视文件修改后自动化作业
gulp.task('tsc:w:style', function () {
    // '**/*.scss' = 递归所有子目录
    gulp.watch(styles + '**/*.scss', style);
});
```

右键 `gulpfile.js` 执行 `任务运行程序资源管理器`

![005.png](https://www.flysfeq.site/usr/uploads/2019/01/243577620.png)

在管理器中可手动运行 gulp 任务

右键 gulp 任务名执行`运行`
![006.png](https://www.flysfeq.site/usr/uploads/2019/01/162609802.png)

自动运行 sass 任务

![007.png](https://www.flysfeq.site/usr/uploads/2019/01/2332442974.png)

运行后当 sass 文件时自动运行 gulp 任务
可以绑定 gulp 运行事件
![008.png](https://www.flysfeq.site/usr/uploads/2019/01/630780258.png)

:tada: DRY

## 其他环境配置

### Visual Studio 开启 Node.js 项目模板

![001.PNG](https://www.flysfeq.site/usr/uploads/2019/01/377833899.png)

在 Visual Studio Install 中选中 `Node.js 开发`

:warning: node.js 模板需要 [Node.js](https://npm.taobao.org/mirrors/node/v10.15.0/node-v10.15.0-x64.msi) 运行时, **不建议**使用 Visual Studio 自带的 Node.js

## 管理 Visual Studio 自带的 Node.js 与 npm

Visual Studio 自带 Node.js 所在的目录

`C:\Program Files (x86)\Microsoft Visual Studio\2017\Community\MSBuild\Microsoft\VisualStudio\NodeJs\`

:warning: 以上(默认)目录`写`操作需要管理员权限,可在此文件夹的`属性>安全>组或用户名>添加>Everyone用户`确保 node 可以全局安装
:warning: **不建议**将此目录加到`环境变量`中, 因为自带的 node.js 版本旧(无法更新?), 建议只作为 ASP.NET MVC/Win Forms 的 npm 管理

### Visual Studio 自带的 npm 安装其他包

安装 gulp

`npm install -g gulp`

安装 node-sass

`npm install -g node-sass`

如果此后 node-sass 有问题可尝试

`npm rebuild node-sass`

安装好后的目录

![002.PNG](https://www.flysfeq.site/usr/uploads/2019/01/1873764319.png)

## 引用

- [Less, Sass, and Font Awesome in ASP.NET Core](https://docs.microsoft.com/en-us/aspnet/core/client-side/less-sass-fa?view=aspnetcore-2.2 "Less, Sass, and Font Awesome in ASP.NET Core")
- [快速入门：使用 Visual Studio 创建第一个 Node.js 应用](https://docs.microsoft.com/zh-cn/visualstudio/ide/quickstart-nodejs?toc=/visualstudio/javascript/toc.json&view=vs-2017)

Visual Studio 2017 中的 Gulp 与 Sass

添加新评论