某次元的教學blog

用輕小說的命名方式是否搞錯了什麼

[教學]VS Code SASS自動編譯開發環境配置2.0

Posted by on 2017 年 9 月 16 日

不知不覺我就三年級了呢…
沒有更新真是對不起
因為有件事讓我花了整個高中2年時間做準備，而最近即將要發生了，我努力的成果全看2個月後了…
總而言之就是這樣
兩個月後我就可以重拾正常更新速度了(大概
這都離題了，回到標題繼續
先解釋下為什麼叫2.0好了
之前有在網路上找過類似的教學，但在現在的vs code版本沒有用
新版的.vscode/task.json的配置寫法和舊版不相容，捨棄了一些參數

所以以下是我更新到目前最新版的VS Code(1.16.1 x64/20170914)配置SASS的方法，參考官方文件來的
需求:

  • VS Code
  • node js和npm

先開好VS Code進入工作目錄然後把該裝的東西裝下去
然後ctrl+`開啟shell輸入

npm install -g gulp node-sass sass-lint

結束了嗎?還沒有

npm install gulp gulp-sass

 
到目前為止，已經可以用
cat filename.scss | node-sass --output-style compressed > filename.css
去編譯scss檔案(OS:指令長長的不好用
但這還不算一個我認為”好的”開發環境
接著在工作區的根目錄下新增gulpfile.js
然後複製下面這個貼進去

// Sass configuration
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']);
})

 
現在，你可以用gulp sass去編譯工作目錄下所有的scss檔案，而且指令超短
然後你還可以用gulp default實時編譯，想結束/停止就ctrl+c
基本上到這裡就是全部了
但我在標題和前言有提到VS Code對吧?
接下來進行整合
ctrl+shift+B會出現提示，按「設定建置工作」然後選擇「Others」
會開啟一個task.json的檔案
把裡面的內容置換成這個

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "type": "gulp",
            "task": "default",
            "problemMatcher": []
        },
        {
            "type": "gulp",
            "task": "sass",
            "problemMatcher": [],
            "group": {
                "kind": "build",
                "isDefault": true
            }
        }
    ]
}

 
現在，你可以使用ctrl+shift+B來取代gulp sass
如果你想改成執行gulp default
可以把”group”那值移動到上面去
本文參考自
https://code.visualstudio.com/docs/languages/css#_automating-sassless-compilation
https://code.visualstudio.com/docs/editor/tasks#_customizing-autodetected-tasks