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

巴特西

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

最新文章

热门文章