pull/19/head
宇天 2018-12-03 10:00:21 +08:00
commit c9dddc1937
8 changed files with 2655 additions and 0 deletions

14
.gitignore vendored Normal file
View File

@ -0,0 +1,14 @@
.DS_Store
.AppleDouble
.LSOverride
.vscode
# Thumbnails
._*
# Files that might appear on external disk
.Spotlight-V100
.Trashes
node_modules
*.vsix

3
.vscodeignore Normal file
View File

@ -0,0 +1,3 @@
.vscode/**
.gitignore

7
CHANGELOG.md Normal file
View File

@ -0,0 +1,7 @@
# Change Log
All notable changes to the "scss-to-css" extension will be documented in this file.
Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how to structure this file.
## [Unreleased]
- Initial release

35
README.md Normal file
View File

@ -0,0 +1,35 @@
# scss-compiler
> 可用于对scss文件进行简单的编译/压缩, 而不用安装各种前端工程化工具(webpack等)。
## 出现的契机
> 对于小项目来说, webpack等各种工程化工具, 实在过于重, 配置又繁琐。 而且还要安装一大堆模块。
> 有时候,我们只想简单的使用scss带来的便捷而已。所以本着这个目的, 我自己写了一个Sublime的插件, 可以在scss文件保存的时候, 自动编译成css文件(存于当前目录)。
## 兼容性
> 理论上, 兼容Linux/MacOS/Windows, 不过我只在Linux下测试过, 其他的系统, 请自行测试,有什么问题, 可以提issue。
## 依赖
> 既然是scss编译的, 当然就依赖于scss模块。
> scss模块, 可以使用js版的, 也可以使用ruby版的。
```bash
# 这是ruby版的, 可以使用 gem来安装
sudo gem install sass
sudo npm i -g postcss-cli
# 安装完psotcss-cli后, 再去到postcss-cli的目录, 再安装 autoprefixer
sudo npm i autoprefixer --save
```
## 插件安装
> 目前只能通过下载方式, 复制到vscode的插件目录,进行安装使用。
> 复制完之后,目录结构应该如下所示
```
- ~/.vscode/
- extensions/
- scss-compiler/
- 其他插件等/
```

157
index.js Normal file
View File

@ -0,0 +1,157 @@
/**
*
* @author yutent<yutent@doui.cc>
* @date 2018/11/01 09:37:55
*/
'use strict'
const vsc = require('vscode')
const path = require('path')
const cp = require('child_process')
const scss = require('node-sass')
const postcss = require('postcss')
const autoprefixer = require('autoprefixer')
const std = vsc.window.createOutputChannel('scss-to-css')
std.out = function() {
std.appendLine(msg)
}
const log = function(...args) {
console.log.apply(console, args)
}
let compileOpts = {
compileOnSave: true,
autoPrefixer: true,
output: 'compressed',
sourcemap: false,
exclude: ''
}
const exec = function(arr, cb) {
let cmd = arr.join(' ')
return new Promise((yes, no) => {
cp.exec(cmd, (err, out) => {
if (err) {
no('err: ' + err)
} else {
yes(arr)
}
})
})
}
const Compiler = {
compile(doc) {
let origin = doc.fileName || ''
let target = origin.replace(/\.scss$/, '.')
let task = []
let postArgs = ['postcss', '--no-map', '-r', '-u', 'autoprefixer']
// 说明不是scss文件
if (origin === target) {
return
}
task = compileOpts.output.map(type => {
let cmd = ['scss', '-C', '-t', type]
let ext = 'css'
if (compileOpts.sourcemap) {
cmd.push('--sourcemap=auto')
} else {
cmd.push('--sourcemap=none')
}
switch (type) {
case 'compressed':
ext = 'min.' + ext
break
default:
ext = type.slice(0, 1) + '.' + ext
}
cmd.push(origin, target + ext)
return cmd
})
// 编译单一类型, 则去掉文件名微调
if (task.length === 1) {
task[0].pop()
task[0].push(target + 'css')
}
task = task.map(item => {
return exec(item)
})
Promise.all(task)
.then(list => {
if (compileOpts.autoPrefixer) {
let task2 = list.map(cmd => {
let arr = postArgs.concat()
arr.splice(1, 0, cmd.pop())
return exec(arr)
})
return Promise.all(task2)
} else {
return true
}
})
.catch(err => {
log(err)
})
},
/**
* 条件过滤
* 用于保存时编译的动作, 右键编译时, 不过滤这2项
*/
filter(doc) {
log(doc)
// 未开启保存时编译
if (!compileOpts.compileOnSave) {
return
}
let origin = doc.fileName || ''
// var.scss文件默认不编译
if (/\/var\.scss$/.test(origin)) {
return
}
// 过滤不编译的文件
if (compileOpts.exclude) {
let exp = new RegExp(compileOpts.exclude, 'i')
if (exp.test(origin)) {
return
}
}
this.compile(doc)
}
}
function activate(ctx) {
// log('hello, the extend scss-compiler is running....')
let options = vsc.workspace.getConfiguration('ScssCompiler')
Object.assign(compileOpts, options)
compileOpts.output = compileOpts.output.split('|')
vsc.workspace.onDidSaveTextDocument(doc => {
Compiler.filter(doc)
})
// let cmd = vsc.commands.registerCommand('ScssCompiler.compile', function(r) {
// log('----------------------------====================-----------------')
// })
// ctx.subscriptions.push(cmd)
}
function deactivate() {}
exports.activate = activate
exports.deactivate = deactivate

BIN
logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 67 KiB

2374
package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

65
package.json Normal file
View File

@ -0,0 +1,65 @@
{
"name": "scss-to-css",
"displayName": "scss-to-css",
"description": "最简单易用的SCSS编译器, 可自动编译scss文件及补全前缀",
"version": "1.0.0",
"publisher": "yutent",
"author": "Yutent [@yutent]",
"icon": "logo.png",
"engines": {
"vscode": "^1.28.0"
},
"categories": [
"Other"
],
"activationEvents": [
"*"
],
"main": "./index",
"contributes": {
"context": [
{
"command": "ScssCompiler.compile",
"title": "Compile this scss file"
}
],
"configuration": {
"type": "object",
"title": "scss-compiler 配置",
"properties": {
"ScssCompiler.compileOnSave": {
"type": "boolean",
"default": true,
"description": "保存后自动编译"
},
"ScssCompiler.autoPrefixer": {
"type": "boolean",
"default": true,
"description": "是否自动补全浏览器前缀(可以手动在项目目录添加 .browserslistrc)"
},
"ScssCompiler.output": {
"type": "string",
"default": "compressed",
"description": "css 文件输出方式. 使用 \"nested\", \"expanded\", \"compact\" or \"compressed\" .\n PS. 如果需要同时编译多种, 可用'|' 分隔, 如 compact | compressed \n 注: 如果编译多种,会自动微调文件名, 编译单个则不微调。"
},
"ScssCompiler.sourcemap": {
"type": "boolean",
"default": false,
"description": "是否生成sourcemap,默认否"
},
"ScssCompiler.exclude": {
"type": "string",
"default": "",
"description": "要忽略的文件的正则表达式(默认不编译var.scss文件)。"
}
}
}
},
"scripts": {
"postinstall": "node ./node_modules/vscode/bin/install"
},
"license": "MIT",
"devDependencies": {
"vscode": "^1.1.21"
}
}