不知不覺我就三年級了呢…
沒有更新真是對不起
因為有件事讓我花了整個高中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
然後複製下面這個貼進去
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
// 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的檔案
把裡面的內容置換成這個
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
{ // 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