Visual Studio 2017中使用gulp编译sass/scss

在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中 【视图】-【其他窗口】-【任务运行程序资源管理器】中 选择项目-刷新任务-双击运行。

 

附上实例地址：https://gitee.com/zymlml/gulp-sass-test