update
parent
c9dddc1937
commit
42c3bf113e
93
index.js
93
index.js
|
@ -10,9 +10,11 @@ const vsc = require('vscode')
|
||||||
const path = require('path')
|
const path = require('path')
|
||||||
const cp = require('child_process')
|
const cp = require('child_process')
|
||||||
|
|
||||||
|
const fs = require('iofs')
|
||||||
const scss = require('node-sass')
|
const scss = require('node-sass')
|
||||||
const postcss = require('postcss')
|
const postcss = require('postcss')
|
||||||
const autoprefixer = require('autoprefixer')
|
const autoprefixer = require('autoprefixer')
|
||||||
|
const prefixer = postcss().use(autoprefixer())
|
||||||
|
|
||||||
const std = vsc.window.createOutputChannel('scss-to-css')
|
const std = vsc.window.createOutputChannel('scss-to-css')
|
||||||
std.out = function() {
|
std.out = function() {
|
||||||
|
@ -22,24 +24,47 @@ const log = function(...args) {
|
||||||
console.log.apply(console, args)
|
console.log.apply(console, args)
|
||||||
}
|
}
|
||||||
|
|
||||||
let compileOpts = {
|
const render = function(style, file) {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
scss.render({ outputStyle: style, file }, (err, { css }) => {
|
||||||
|
if (err) {
|
||||||
|
reject(err)
|
||||||
|
} else {
|
||||||
|
resolve(css)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
let options = {
|
||||||
compileOnSave: true,
|
compileOnSave: true,
|
||||||
autoPrefixer: true,
|
autoPrefixer: true,
|
||||||
output: 'compressed',
|
output: 'compressed',
|
||||||
sourcemap: false,
|
|
||||||
exclude: ''
|
exclude: ''
|
||||||
}
|
}
|
||||||
|
|
||||||
const exec = function(arr, cb) {
|
// const exec = function(arr, cb) {
|
||||||
let cmd = arr.join(' ')
|
// let cmd = arr.join(' ')
|
||||||
return new Promise((yes, no) => {
|
// return new Promise((yes, no) => {
|
||||||
cp.exec(cmd, (err, out) => {
|
// cp.exec(cmd, (err, out) => {
|
||||||
if (err) {
|
// if (err) {
|
||||||
no('err: ' + err)
|
// no('err: ' + err)
|
||||||
} else {
|
// } else {
|
||||||
yes(arr)
|
// yes(arr)
|
||||||
}
|
// }
|
||||||
|
// })
|
||||||
|
// })
|
||||||
|
// }
|
||||||
|
|
||||||
|
const compileCss = (style, entry, output) => {
|
||||||
|
return render(style, entry).then(css => {
|
||||||
|
if (options.autoPrefixer) {
|
||||||
|
return prefixer.process(css, { from: '', to: '' }).then(result => {
|
||||||
|
return { css: result.css, output }
|
||||||
})
|
})
|
||||||
|
} else {
|
||||||
|
return { css, output }
|
||||||
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -48,57 +73,40 @@ const Compiler = {
|
||||||
let origin = doc.fileName || ''
|
let origin = doc.fileName || ''
|
||||||
let target = origin.replace(/\.scss$/, '.')
|
let target = origin.replace(/\.scss$/, '.')
|
||||||
let task = []
|
let task = []
|
||||||
let postArgs = ['postcss', '--no-map', '-r', '-u', 'autoprefixer']
|
|
||||||
|
|
||||||
// 说明不是scss文件
|
// 说明不是scss文件
|
||||||
if (origin === target) {
|
if (origin === target) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
task = compileOpts.output.map(type => {
|
task = options.output.map(style => {
|
||||||
let cmd = ['scss', '-C', '-t', type]
|
|
||||||
let ext = 'css'
|
let ext = 'css'
|
||||||
|
|
||||||
if (compileOpts.sourcemap) {
|
switch (style) {
|
||||||
cmd.push('--sourcemap=auto')
|
|
||||||
} else {
|
|
||||||
cmd.push('--sourcemap=none')
|
|
||||||
}
|
|
||||||
switch (type) {
|
|
||||||
case 'compressed':
|
case 'compressed':
|
||||||
ext = 'min.' + ext
|
ext = 'min.' + ext
|
||||||
break
|
break
|
||||||
default:
|
default:
|
||||||
ext = type.slice(0, 1) + '.' + ext
|
ext = style.slice(0, 1) + '.' + ext
|
||||||
}
|
}
|
||||||
|
|
||||||
cmd.push(origin, target + ext)
|
return { style, output: target + ext }
|
||||||
return cmd
|
|
||||||
})
|
})
|
||||||
|
|
||||||
// 编译单一类型, 则去掉文件名微调
|
// 编译单一类型, 则去掉文件名微调
|
||||||
if (task.length === 1) {
|
if (task.length === 1) {
|
||||||
task[0].pop()
|
task[0].output = target + 'css'
|
||||||
task[0].push(target + 'css')
|
|
||||||
}
|
}
|
||||||
|
|
||||||
task = task.map(item => {
|
task = task.map(item => {
|
||||||
return exec(item)
|
return compileCss(item.style, origin, item.output)
|
||||||
})
|
})
|
||||||
|
|
||||||
Promise.all(task)
|
Promise.all(task)
|
||||||
.then(list => {
|
.then(list => {
|
||||||
if (compileOpts.autoPrefixer) {
|
list.forEach(it => {
|
||||||
let task2 = list.map(cmd => {
|
fs.echo(it.css, it.output)
|
||||||
let arr = postArgs.concat()
|
|
||||||
arr.splice(1, 0, cmd.pop())
|
|
||||||
return exec(arr)
|
|
||||||
})
|
})
|
||||||
|
|
||||||
return Promise.all(task2)
|
|
||||||
} else {
|
|
||||||
return true
|
|
||||||
}
|
|
||||||
})
|
})
|
||||||
.catch(err => {
|
.catch(err => {
|
||||||
log(err)
|
log(err)
|
||||||
|
@ -110,9 +118,8 @@ const Compiler = {
|
||||||
* 用于保存时编译的动作, 右键编译时, 不过滤这2项
|
* 用于保存时编译的动作, 右键编译时, 不过滤这2项
|
||||||
*/
|
*/
|
||||||
filter(doc) {
|
filter(doc) {
|
||||||
log(doc)
|
|
||||||
// 未开启保存时编译
|
// 未开启保存时编译
|
||||||
if (!compileOpts.compileOnSave) {
|
if (!options.compileOnSave) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -124,8 +131,8 @@ const Compiler = {
|
||||||
}
|
}
|
||||||
|
|
||||||
// 过滤不编译的文件
|
// 过滤不编译的文件
|
||||||
if (compileOpts.exclude) {
|
if (options.exclude) {
|
||||||
let exp = new RegExp(compileOpts.exclude, 'i')
|
let exp = new RegExp(options.exclude, 'i')
|
||||||
if (exp.test(origin)) {
|
if (exp.test(origin)) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
@ -137,10 +144,10 @@ const Compiler = {
|
||||||
|
|
||||||
function activate(ctx) {
|
function activate(ctx) {
|
||||||
// log('hello, the extend scss-compiler is running....')
|
// log('hello, the extend scss-compiler is running....')
|
||||||
let options = vsc.workspace.getConfiguration('ScssCompiler')
|
let conf = vsc.workspace.getConfiguration('Scss2css')
|
||||||
Object.assign(compileOpts, options)
|
Object.assign(options, conf)
|
||||||
|
|
||||||
compileOpts.output = compileOpts.output.split('|')
|
options.output = options.output.split('|').map(it => it.trim())
|
||||||
|
|
||||||
vsc.workspace.onDidSaveTextDocument(doc => {
|
vsc.workspace.onDidSaveTextDocument(doc => {
|
||||||
Compiler.filter(doc)
|
Compiler.filter(doc)
|
||||||
|
|
23
package.json
23
package.json
|
@ -19,35 +19,30 @@
|
||||||
"contributes": {
|
"contributes": {
|
||||||
"context": [
|
"context": [
|
||||||
{
|
{
|
||||||
"command": "ScssCompiler.compile",
|
"command": "Scss2css.compile",
|
||||||
"title": "Compile this scss file"
|
"title": "Compile this scss file"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
"configuration": {
|
"configuration": {
|
||||||
"type": "object",
|
"type": "object",
|
||||||
"title": "scss-compiler 配置",
|
"title": "Scss-to-css 配置",
|
||||||
"properties": {
|
"properties": {
|
||||||
"ScssCompiler.compileOnSave": {
|
"Scss2css.compileOnSave": {
|
||||||
"type": "boolean",
|
"type": "boolean",
|
||||||
"default": true,
|
"default": true,
|
||||||
"description": "保存后自动编译"
|
"description": "保存后自动编译"
|
||||||
},
|
},
|
||||||
"ScssCompiler.autoPrefixer": {
|
"Scss2css.autoPrefixer": {
|
||||||
"type": "boolean",
|
"type": "boolean",
|
||||||
"default": true,
|
"default": true,
|
||||||
"description": "是否自动补全浏览器前缀(可以手动在项目目录添加 .browserslistrc)"
|
"description": "是否自动补全浏览器前缀(可以手动在项目目录添加 .browserslistrc)"
|
||||||
},
|
},
|
||||||
"ScssCompiler.output": {
|
"Scss2css.output": {
|
||||||
"type": "string",
|
"type": "string",
|
||||||
"default": "compressed",
|
"default": "compressed",
|
||||||
"description": "css 文件输出方式. 使用 \"nested\", \"expanded\", \"compact\" or \"compressed\" .\n PS. 如果需要同时编译多种, 可用'|' 分隔, 如 compact | compressed \n 注: 如果编译多种,会自动微调文件名, 编译单个则不微调。"
|
"description": "css 文件输出方式. 使用 \"nested\", \"expanded\", \"compact\" or \"compressed\" .\n PS. 如果需要同时编译多种, 可用'|' 分隔, 如 compact | compressed \n 注: 如果编译多种,会自动微调文件名, 编译单个则不微调。"
|
||||||
},
|
},
|
||||||
"ScssCompiler.sourcemap": {
|
"Scss2css.exclude": {
|
||||||
"type": "boolean",
|
|
||||||
"default": false,
|
|
||||||
"description": "是否生成sourcemap,默认否"
|
|
||||||
},
|
|
||||||
"ScssCompiler.exclude": {
|
|
||||||
"type": "string",
|
"type": "string",
|
||||||
"default": "",
|
"default": "",
|
||||||
"description": "要忽略的文件的正则表达式(默认不编译var.scss文件)。"
|
"description": "要忽略的文件的正则表达式(默认不编译var.scss文件)。"
|
||||||
|
@ -61,5 +56,11 @@
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"vscode": "^1.1.21"
|
"vscode": "^1.1.21"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"node-sass": "^4.10.0",
|
||||||
|
"iofs": "^1.1.0",
|
||||||
|
"postcss": "^7.0.6",
|
||||||
|
"autoprefixer": "^9.3.1"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue