[教學]VS Code SASS自動編譯開發環境配置2.0
Posted by Benny1923 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
css gulp node nodejs npm sass scss VS Code