如何在Webstorm中自动修复由less生成的css文件？

Question

我有Webstorm 7（在Win7上）将我的.less文件编译为带源代码的缩小CSS（在nodejs v0.10.26上使用lessc，从Webstorm中的File Watcher运行），然后我可以在生成的css上运行autoprefixer自动插入供应商前缀。

我不知道该怎么办，是结合了两个步骤。在Webstorm中链接File Watchers可能吗？

可能的方法：

• 创建从文件观察家称为批处理脚本，然后按顺序调用越来越autoprefixer。
• 创建一个调用较少的node.js脚本/模块，然后创建autoprefixer。
• 让较少的转译器输出具有自定义扩展名的css（例如.unprefixedcss），然后专门为该扩展名创建一个File Watcher。
• 我失踪的东西？

Answer 1

有较少的一个插件，做这件工作不增加观察者：https://github.com/less/less-plugin-autoprefix

安装之后，你可以添加--autoprefix="…"到你的论点为输出在webstorms文件观察者。

Answer 2

是的，可以链接文件观察者。 autoprefixer文件观察器将侦听css更改并在少运行后运行。第一和secong方法将工作太

Answer 3

我试着用python脚本批处理脚本的方法，从一个单一的文件守望叫：

#!/usr/bin/env python 

""" 
less-prefixed.py 

Chains less and autoprefixer, to produce a minified, vendor-prefixed css file. 
""" 

# TODO: move config data to a config file 
# TODO: delete the intermediate files generated by less 

import argparse 
import os 
import subprocess 
from pprint import pprint as pp 

# Config data 
node_folder = r'C:/Users/ClementMandragora/AppData/Roaming/npm' 
less_script = os.path.join(node_folder, 'lessc.cmd') 
autoprefixer_script = os.path.join(node_folder, 'autoprefixer.cmd') 

parser = argparse.ArgumentParser() 
parser.add_argument("--file-name", help="filename, not including the extension", required=True) 
parser.add_argument("--working-dir", help="the directory to do the work in", required=True) 
args = parser.parse_args() 

print('\nArgs:') 
pp(vars(args)) 
print('') 

os.chdir(args.working_dir) 
print('CWD: {c}\n'.format(c=os.getcwd() + '\n')) 

print('Running less-css...') 

# Compile and minify the less file to css. 
# Include a sourcemap. 
exitcode = subprocess.Popen([ 
    less_script, 
    '--no-color', 
    '-x', 
    '--source-map={n}.css.map'.format(n=args.file_name), 
    '{n}.less'.format(n=args.file_name), # source 
    '{n}.min.css'.format(n=args.file_name) # dest 
], cwd=args.working_dir).wait() 

assert exitcode is 0, 'Nonzero return code from less! Got: {r}'.format(r=exitcode) 
print('less compilation completed.\nRunning autoprefixer...') 

# Run autoprefixer over the result from lessc. 
exitcode = subprocess.Popen([ 
    autoprefixer_script, 
    '-o', 
    '{n}.prefixed.min.css'.format(n=args.file_name), # dest 
    '{n}.min.css'.format(n=args.file_name) # source 
], cwd=args.working_dir).wait() 

assert exitcode is 0, 'Nonzero return code from autoprefixer! Got: {r}'.format(r=exitcode) 

print('autoprefixer completed.\nFinal filename is {n}.prefixed.min.css'.format(n=args.file_name)) 

它的工作，但似乎笨拙。

下一次尝试有多个文件观察者;事实证明，有autoprefixer监视更改为CSS文件，然后生成另一个CSS文件，导致循环。

因此，我在Webstorm中为与*.min.css（较少转译器的输出）匹配的文件创建了一个自定义文件类型，然后为该扩展创建了一个File Watcher。从默认的其他差异/包括少文件守望者是：

• 计划：C:\Users\ClementMandragora\AppData\Roaming\npm\autoprefixer.cmd
• 参数：-o $FileNameWithoutExtension$.prefixed.css $FileName$
• 输出路径刷新：$FileNameWithoutExtension$.prefixed.css:$FileNameWithoutExtension$.prefixed.css.map

它最初并不是清楚我'刷新的输出路径'也标志着Webstorm将生成的文件放在主文件* .less下，减少了项目的混乱。 （我保持源和输出在同一个文件夹。）