在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的更多相关文章

  1. 在Visual Studio 2017中使用Asp.Net Core构建Angular4应用程序

    前言 Visual Studio 2017已经发布了很久了.做为集成了Asp.Net Core 1.1的地表最强IDE工具,越来越受.NET系的开发人员追捧. 随着Google Angular4的发布 ...

  2. 【Asp.Net Core】在Visual Studio 2017中使用Asp.Net Core构建Angular4应用程序

    前言 Visual Studio 2017已经发布了很久了.做为集成了Asp.Net Core 1.1的地表最强IDE工具,越来越受.NET系的开发人员追捧. 随着Google Angular4的发布 ...

  3. 【C++】GSL(GNU Scientific Library) 的安装及在 Visual Studio 2017 中的使用

    GSL 是 GNU 开发并维护的科学计算的库,其中包括: 复数 多项式的根 特殊函数 向量和矩阵 排列 排序 BLAS支持 线性代数 Eigensystems 快速傅立叶变换 正交 随机数 准随机序列 ...

  4. Visual Studio 2017中使用正则修改部分内容 如何使用ILAsm与ILDasm修改.Net exe(dll)文件 C#学习-图解教程(1):格式化数字字符串 小程序开发之图片转Base64(C#、.Net) jquery遍历table为每一个单元格取值及赋值 。net加密解密相关方法 .net关于坐标之间一些简单操作

    Visual Studio 2017中使用正则修改部分内容   最近在项目中想实现一个小工具,需要根据类的属性<summary>的内容加上相应的[Description]特性,需要实现的效 ...

  5. Visual Studio 2017中使用SourceLink调试ASP.NET Core源码

    背景 当我们在学习ASP.NET Core或者调试ASP.NET Core程序的时候,有时候需要调试底层代码,但是当我们在Visual Studio中调试程序的时候,由于一些基础库或者第三方库缺少pd ...

  6. Visual studio 2017中 Javascript对于Xrm对象模型没有智能提示的解决办法

    Visual studio 2017中 Javascript对于Xrm对象模型没有智能提示的解决办法 先上个图.语法提示支持到 Microsoft Dynamics xRM API 8.2 也就是cr ...

  7. Visual studio 2017 中的Javascript智能提示与调试

    1.智能提示 对于JS文件中的API,你若需要让那个JS文件中的方法能够在你写的那个JS文件中能够智能显示的话,直接把它拉进你的JS文件中就好了. 举个例子:你想 在你正在写的a.js文件中引用b.j ...

  8. 如何在Visual Studio 2017中使用C# 7+语法 构建NetCore应用框架之实战篇(二):BitAdminCore框架定位及架构 构建NetCore应用框架之实战篇系列 构建NetCore应用框架之实战篇(一):什么是框架,如何设计一个框架 NetCore入门篇:(十二)在IIS中部署Net Core程序

    如何在Visual Studio 2017中使用C# 7+语法   前言 之前不知看过哪位前辈的博文有点印象C# 7控制台开始支持执行异步方法,然后闲来无事,搞着,搞着没搞出来,然后就写了这篇博文,不 ...

  9. 在Visual Studio 2017中找不到.NET Framework 4.6.2

    原文 https://blogs.msdn.microsoft.com/benjaminperkins/2017/03/23/net-framwork-4-6-2-not-in-visual-stud ...

随机推荐

  1. [Python]获取win平台文件的详细信息

    import win32api def getFileProperties(fname): """ 读取给定文件的所有属性, 返回一个字典. ""&q ...

  2. WeChall_ Training: Stegano I (Training, Stegano)

    This is the most basic image stegano I can think of. 解题: 一张小图片,文本方式打开.

  3. CERC2017 H Hidden Hierarchy(树+模拟)

    题意: 在一些给定的目录里按要求展开到制定大小并按字典序输出 思路: 因为有目录这个东西,所以想到模拟一个类似字典树的东西,不过这里每个儿子可能有n个节点,而且不能O(1)查询了 代码超长.. #in ...

  4. Elasticsearch与中文分词配置

    一. elasticsearch on windows 1.下载地址: https://www.elastic.co/cn/downloads/elasticsearch 如果浏览器下载文件慢,建议使 ...

  5. Thingsboard源码安装部署

    交流QQ群 如果安装有其他问题,可以到QQ群求助 环境安装 开发环境要求:Jdk 1.8版本Postgresql 9以上Node.jsNpmMaven 3.6以上Git工具Idea开发工具 JDK 下 ...

  6. javascirpt获取随机数

    /* getran(min, max, n): 获取min与max之间的随机数 n: n保留浮点数数量 */ function getran(min, max, n){ return Number(( ...

  7. 记一次kubernetes驱逐踩坑

    最近在公司的线上服务器上发现了一个现象: 将某个node的kubelet短暂的停掉之后,其上的pod马上会被驱逐,这让笔者大吃一惊,印象之中,停掉kubelet后,该node会变为NotReady状态 ...

  8. c++头文件包含 #ifndef ##pragma once

    2013-04-14 17:03 (分类:计算机程序) 烦死了,这种垃圾小问题很多,你又必须要知道.......在编写c++程序时,会编写多个类或者多个cpp文件,免不了要多次使用include包含头 ...

  9. [Linux]LVM扩展卷

    LVM LVM是逻辑盘卷管理(Logical Volume Manager)的简称,它是Linux环境下对磁盘分区进行管理的一种机制,LVM是建立在硬盘和分区之上的一个逻辑层,来提高磁盘分区管理的灵活 ...

  10. HDP之HBase性能调优

    (官方文档翻译及整理) 一.系统级调优 1.保证充足的RAM 2.64位的操作系统 3.Linux的swappiness设置为0 : sysctl vm.swappiness=10 vim /etc/ ...