Question

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

我不知道该怎么办，将两个步骤结合起来。是否可以在Webstorm中链接File Watchers？

可能的方法：

创建一个从文件观察器调用的批处理脚本，然后按顺序调用less和autoprefixer。
创建一个调用less的node.js脚本/模块，然后创建autoprefixer。
使用自定义扩展名（例如.unprefixedcss）将较少的转换器输出css，然后专门为该扩展名提供文件监视器。
我缺少的东西？

Answer 1

有一个较少的插件可以在不添加观察者的情况下完成这项工作：https://github.com/less/less-plugin-autoprefix

安装完成后，您可以将--autoprefix="…"添加到webstorms文件观察器输出的参数中。

Answer 2

是的，可以链接文件观察者。 autoprefixer文件观察程序将监听css更改并在较少之后运行。第一种和第二种方法也会起作用

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

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

我最初并不清楚“刷新输出路径”也表示Webstorm将主生成文件放在主* .less文件下，从而减少了项目的混乱。（我将源和输出保存在同一个文件夹中。）

如何在Webstorm中使用less生成的autoprefixer css文件？

3 个答案: