在Visual Studio 2017中使用gulp编译sass/scss文件
需要的环境：Visual Studio 2017、Node.js、npm
在vs2017中 【视图】-【其他窗口】-【任务运行程序资源管理器】打开。
在学习的时候，发生网上讲的大多都是的gulpfile.js里面的核心内容，因此我这里写下我的详细操作步骤留作笔记。
步骤：
1、运行：cmd
2、运行：cd 到项目的根目录
3、运行：npm init 初始化package.json （一直Enter到底，也可以按照提示填写你想要的初始化信息，也可以enter到底后手动修改）
4、运行：npm install --save-dev [包名] 简写：npm i -D [包名] 安装以下package.json中“devDependencies”的包
package.json文件内容（完整）：（可以复制该内容到你项目下的package.json中；
a、重新在vs2017中打开项目解决方案，vs2017会自动运行命令，进行包的安装。可在：【视图】-【输出】-显示输出来源：Bower/npm中查看自动安装结果。
b、也可以在根目录下运行：npm install 命令安装。）
{
"name": "test1",
"version": "1.0.0",
"description": "test1",
"main": "gulpfile.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"gulp": "^4.0.0",
"gulp-clean-css": "^4.0.0",
"gulp-sass": "^4.0.2"
}
}
5、手动创建名为“gulpfile.js”的文件
gulpfile.js 文件内容：
var { src, dest, task, series, watch, parallel } = require('gulp');
var sass = require("gulp-sass");
var cleanCss = require('gulp-clean-css');
// Gup API：https://gulpjs.com/docs/en/api/task
// 运行任务：在VS2017 [视图]-[其他窗口]-[任务运行程序资源管理器] 中查看，双击运行（右键菜单-运行）
// 如果有错误，在[视图] - [输出] - 显示输出来源：任务运行程序资源管理器 中查看
// 任务 sass：编译css文件夹下单个.scss文件
task("sass-test", function () {
return src('sass/test.scss')
.pipe(sass())
.pipe(cleanCss()) //.pipe(cleanCss({ level: 2 })) // 编译结果不一样，合并相同的样式
.pipe(dest('css'));
});
// 任务 sass：编译css文件夹下单个.scss文件
task("sass-test2", function () {
return src('sass/test2.scss')
.pipe(sass())
.pipe(cleanCss())
.pipe(dest('css'));
});
// 任务 sass：编译css文件夹下所有.scss文件
task("sass", function () {
return src('sass/*.scss')
.pipe(sass())
.pipe(cleanCss())
.pipe(dest('css'));
});
// 任务 watch:sass：监听目录下所有sass文件，单个触发编译
task('watch:sass', function () {
const watcher = watch('sass/*.scss');
// 事件：'add', 'addDir', 'change', 'unlink', 'unlinkDir', 'ready', 'error', or 'all'全部事件
watcher.on('all', function (event, path) {
path = path.replace(/\\/g, '/');
src(path)
.pipe(sass())
.pipe(cleanCss())
.pipe(dest('css'));
console.log('['+(new Date()).toTimeString().substr(0, 8)+'] '+event+' \033[40;36m' + path);
});
});
// 一个任务启动多个任务 series 依次执行 parallel 是并发执行
task('sass-all', series('sass-test', 'sass-test2'));
6、在vs2017中 【视图】-【其他窗口】-【任务运行程序资源管理器】中 选择项目-刷新任务-双击运行。