如何在Webstorm中自动添加less生成的CSS文件的前缀?

Question

我拥有Webstorm 7 (在Win7上)能够将我的.less文件编译成压缩的CSS并生成sourcemaps（使用lessc和运行在Webstorm中的节点v0.10.26的File Watcher），然后我可以在生成的CSS上运行autoprefixer，以自动插入供应商前缀。

但我不确定如何合并这两个步骤。在Webstorm中链接File Watchers是否可行？

可能的方法如下：

1. 创建一个批处理脚本，从File Watcher调用它，然后按顺序调用less和autoprefixer。

2. 创建一个调用less，然后autoprefixer的node.js脚本/模块。

3. 让less转换器输出具有自定义扩展名(例如.unprefixedcss)的CSS，然后专门为该扩展名创建一个File Watcher。

4. 还有其他方法吗？

- Robert K. Bell

Answer 1

有一个与less相关的插件可以完成这个工作而不需要添加观察器：

https://github.com/less/less-plugin-autoprefix

安装后，您可以在webstorm文件观察器的参数中添加--autoprefix="…"以获得输出。

- crtdwthlve

Answer 2

是的，可以链接文件监视器。自动前缀文件监视器将监听 CSS 更改并在 Less 之后运行。第一种和第二种方法也可以使用。

- lena

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（less转换器的输出）的文件创建了自定义文件类型，然后为该扩展名创建了一个文件监视器。与默认/包含的less文件监视器的其他区别是：

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

最初对我来说并不清楚“要刷新的输出路径”也会向Webstorm发出信号，将生成的文件放在主*.less文件下，减少项目杂乱无章。（我将源和输出保存在同一个文件夹中。）

- Robert K. Bell