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,498評論 1 32
  • 安裝Gulp首先需要安裝Node.js,并在控制臺輸入$ npm install gulp -gMac端需要寫成$...
    LaBaby_閱讀 958評論 0 1
  • 參照Gulp for Beginners來學習Gulp基本內容。以下為學習記錄筆記。 安裝Gulp 首先需要安裝N...
    JenniferYe閱讀 2,571評論 1 17
  • 前言 本文默認你已經安裝好node環境,并且熟悉node命令,和window cd命令。 gulp簡介 基于nod...
    9I閱讀 1,993評論 4 50
  • 原文標題:Gulp for Beginners作者: Zell Liew翻譯:治電小白菜原文地址:https://...
    ZZES_ZCDC閱讀 1,606評論 6 18