VS code自动将Sass编译为CSS 二

要实现Sass到CSS的自动编译,在 VS code自动将Sass编译为CSS 一 的基础上我们还有几个步骤要完成。

第一步:安装 Gulp 和 gulp-sass######
# sudo install -g gulp gulp-sass```

######第二步:创建 Gulp Task ######
在项目的根目录下创建 *gulpfile.js* ,写入以下内容:

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function() {
gulp.src('*.scss')
.pipe(sass())
.pipe(gulp.dest(function(f) {
return f.base;
}))
});

gulp.task('default', ['sass'], function() {
gulp.watch('*.scss', ['sass']);
})```


gulpfile.js
第三步:修改 tasks.json 配置######

修改 tasks.json 内容,让 node-scss 能够监听 style.scss 的变化:

{
    "version": "0.1.0",
    "command": "gulp",
    "isShellCommand": true,
    "tasks": [
        {
            "taskName": "default",
            "isBuildCommand": true,
            "showOutput": "always",
            "isWatching": true
        }
    ]
}```

######第四步:运行Build任务######
点击 **⇧⌘B** 会执行 ```node-sass  --watch styles.scss styles.css```
 命令,监听 *style.scss*文件的变化并编译到 *style.css*。
![监听styles.scss变化并编译](http://upload-images.jianshu.io/upload_images/1717809-7c45dc7638b32f42.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 在现在的前端开发中,前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等等一些原本后端的思想开始...
    Charlot阅读 5,518评论 1 32
  • 安装Gulp首先需要安装Node.js,并在控制台输入$ npm install gulp -gMac端需要写成$...
    LaBaby_阅读 970评论 0 1
  • 参照Gulp for Beginners来学习Gulp基本内容。以下为学习记录笔记。 安装Gulp 首先需要安装N...
    JenniferYe阅读 2,577评论 1 17
  • 前言 本文默认你已经安装好node环境,并且熟悉node命令,和window cd命令。 gulp简介 基于nod...
    9I阅读 1,995评论 4 50
  • 原文标题:Gulp for Beginners作者: Zell Liew翻译:治电小白菜原文地址:https://...
    ZZES_ZCDC阅读 1,617评论 6 18