init
commit
c9dddc1937
|
@ -0,0 +1,14 @@
|
||||||
|
.DS_Store
|
||||||
|
.AppleDouble
|
||||||
|
.LSOverride
|
||||||
|
.vscode
|
||||||
|
|
||||||
|
# Thumbnails
|
||||||
|
._*
|
||||||
|
|
||||||
|
# Files that might appear on external disk
|
||||||
|
.Spotlight-V100
|
||||||
|
.Trashes
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
*.vsix
|
|
@ -0,0 +1,3 @@
|
||||||
|
.vscode/**
|
||||||
|
.gitignore
|
||||||
|
|
|
@ -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
|
|
@ -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/
|
||||||
|
- 其他插件等/
|
||||||
|
```
|
|
@ -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
|
File diff suppressed because it is too large
Load Diff
|
@ -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"
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in New Issue