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

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

不知不覺我就三年級了呢…
沒有更新真是對不起
因為有件事讓我花了整個高中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
然後複製下面這個貼進去

 

現在,你可以用gulp sass去編譯工作目錄下所有的scss檔案,而且指令超短
然後你還可以用gulp default實時編譯,想結束/停止就ctrl+c

基本上到這裡就是全部了
但我在標題和前言有提到VS Code對吧?
接下來進行整合

ctrl+shift+B會出現提示,按「設定建置工作」然後選擇「Others」
會開啟一個task.json的檔案
把裡面的內容置換成這個

 

現在,你可以使用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