Wie können CSS-Dateien, die von weniger generiert werden, in Webstorm automatisch korrigiert werden?

Question

Ich habe Webstorm 7 (auf Win7) compiling meine .less-Dateien in Minified css mit Quellkarten (mit lessc on nodejs v0.10.26, von einem Dateiwächter in Webstorm laufen), und ich kann dann autoprefixer auf diese generierte css ausführen um automatisch Anbieterpräfixe einzufügen.

Was ich bin nicht sicher, wie zu tun ist, kombinieren Sie die beiden Schritte. Ist es möglich, Dateiwächter in Webstorm zu verketten?

Mögliche Ansätze:

• ein Batch-Skript erstellen, die aus dem Datei-Watcher aufgerufen wird, ruft dann weniger und autoprefixer in Folge.
• Erstellen Sie ein node.js-Skript/Modul, das weniger aufruft, als Autoprefixer.
• Lassen Sie den weniger transpiler Ausgabe der CSS mit einer benutzerdefinierten Erweiterung (z. B. .unprefixedcss), dann haben Sie eine Dateiüberwachung speziell für diese Erweiterung.
• Etwas, das ich vermisse?

Answer 1

es ein Plugin für weniger ist, die diesen Job macht, ohne einen Beobachter fügt hinzu: https://github.com/less/less-plugin-autoprefix

Nach der Installation Sie --autoprefix="…" auf Ihre Argumente für die Ausgabe hinzufügen in webstorms Dateibeobachter.

Answer 2

ja, es ist möglich, Dateibeobachter zu verketten. Der Autoprefixer-Dateiwatcher wird CSS-Änderungen abhören und nach weniger laufen. Die ersten und die secong Ansätze funktionieren zu

Answer 3

ich den Batch-Skript Ansatz mit einem Python-Skript versucht, aus einer einzigen Datei Watcher genannt:

#!/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)) 

Es funktionierte, aber schien unhandlich.

Der nächste Versuch bestand aus mehreren Dateiwächtern; Es stellt sich heraus, dass Autoprefixer für Änderungen an CSS-Dateien zu sehen, dann eine andere CSS-Datei generieren, führt zu einer Schleife.

Also ich erstellte einen benutzerdefinierten Dateityp in Webstorm für Dateien, die *.min.css entsprechen (die Ausgabe des weniger transpiler), dann erstellte einen Dateiwächter für diese Erweiterung. Die anderen Unterschiede von der default/enthalten weniger Datei-Watcher sind:

• Programm: C:\Users\ClementMandragora\AppData\Roaming\npm\autoprefixer.cmd
• Argumente: -o $FileNameWithoutExtension$.prefixed.css $FileName$
• Ausgangspfade zu aktualisieren: $FileNameWithoutExtension$.prefixed.css:$FileNameWithoutExtension$.prefixed.css.map

Es war zunächst nicht klar, Ich, dass die 'Output paths to refresh' auch Webstorm signalisieren, die generierten Dateien unter der Hauptdatei * .less zu parent zu haben, um das Durcheinander von Projekten zu reduzieren. (Ich behalte Quelle und Ausgabe im selben Ordner.)