正如我在一些問題評論中所說的,由於DotLess不適合我,我轉而採用其他方法:使用官方LESS編譯器(JavaScript一)編譯LESS並使用Windows Script Host執行。
在您的解決方案目錄中創建一個文件夾(即,您的.sln和項目目錄存儲爲您的特定解決方案)。致電您的文件夾爲Build。
你需要這些腳本(創建爲每一個內部構建文件夾中的文件,我給你整個文件名):
lessc.wsf
<!--
Less.js compiler for Windows Script Host
http://blog.dotsmart.net/
Copyright (c) 2010, Duncan Smart
Licensed under the Apache 2.0 License.
-->
<job>
<script language="jscript">
// Stub out globals
var window = this;
var location = window.location = {
port: 0,
href: ''
};
var fso = new ActiveXObject("Scripting.FileSystemObject");
var input = null;
var util = {
readText: function (filename) {
//WScript.StdErr.WriteLine("readText: " + filename);
var file = fso.OpenTextFile(filename);
// Don't error on empty files
var text = file.AtEndOfStream ? '' : file.ReadAll();
// Strip off any UTF-8 BOM
var utf8bom = String.fromCharCode(0xEF, 0xBB, 0xBF);
if (text.substr(0, utf8bom.length) == utf8bom) {
text = text.substr(utf8bom.length);
}
file.Close();
return text;
}
};
// XMLHttpRequest that just gets local files. Used when processing "@import"
function XMLHttpRequest(){}
XMLHttpRequest.prototype = {
open: function (method, url, async) {
this.url = url;
},
send: function() {
// get the file path relative to the input less file/directory
var currDir = fso.folderExists(input) ? input : fso.getParentFolderName(input);
var filename = fso.BuildPath(currDir, this.url);
//WScript.StdErr.WriteLine("XHR.send " + filename);
// Little hack so *.less will resolve to *.less.css also. Helps with Visual Studio
// ensuring that file BuildAction is set to Content and you get rudimentary syntax highlighting with no set up.
if (filename.match(/.less$/i) && !fso.FileExists(filename)) {
filename = filename.replace(/.less$/i, '.less.css');
}
try {
this.status = 200;
this.responseText = util.readText(filename);
}
catch (e) {
this.status = 404;
this.responseText = e.description;
}
},
setRequestHeader: function() {},
getResponseHeader: function() {}
};
// Fake document
var document = {
_dummyElement: {
childNodes: [],
appendChild: function(){},
style: {}
},
getElementsByTagName: function(){ return []; },
getElementById: function(){ return this._dummyElement; },
createElement: function(){ return this._dummyElement; },
createTextNode: function(){ return this._dummyElement; }
};
</script>
<!-- less.js from https://github.com/cloudhead/less.js/tree/master/dist/ -->
<script language="jscript" src="less.js" />
<script language="jscript">
// Parse args
var args = {};
for (var i = 0; i < WScript.Arguments.Length; i++) {
var arg = WScript.Arguments.Item(i);
// Handle "-switch" and "--switch"
var match = arg.match(/^--?([a-z][0-9a-z-]*)$/i);
if (match) {
i = match[1];
arg = true;
}
args[i] = arg;
}
input = args[0];
var output = args[1];
if (fso.folderExists(input)) {
input = fso.getAbsolutePathName(input);
var files = getFiles(input, /\.less$/i);
for (var i = 0; i < files.length; i++) {
var file = files[i];
convert(file.path, output + '\\' + file.name.replace(/\.less$/i, '.css'));
}
}
else {
if (fso.folderexists(output)) {
output = fso.getAbsolutePathName(output) + '\\' + fso.getfile(input).name.replace(/\.less$/i, '.css');
}
convert(input, output);
}
// Returns array of {name:'foo.bar', path:'c:\baz\foo.bar'} for given directory and pattern
function getFiles(dir, regex) {
var e = new Enumerator(fso.getFolder(dir).files);
var files = []
for (; !e.atEnd(); e.moveNext()) {
if (regex.test(e.item().path)) {
files.push({
name: e.item().name,
path: e.item().path
});
}
}
return files;
}
function convert(input, output) {
if (!input) {
WScript.StdErr.WriteLine("lessc.wsf: no input files");
WScript.StdErr.WriteLine("Usage:");
WScript.StdErr.WriteLine(" Single file: cscript //nologo lessc.wsf input.less [output.css] [-compress]");
WScript.StdErr.WriteLine(" Directory: cscript //nologo lessc.wsf inputdir outputdir [-compress]");
WScript.Quit(1);
}
var data;
if (input == '-') {
var chunks = [];
while (!WScript.StdIn.AtEndOfStream)
chunks.push(WScript.StdIn.ReadAll());
data = chunks.join('');
}
else {
data = util.readText(input);
}
var parser = new less.Parser({
filename: input
});
try {
parser.parse(data, function (err, tree) {
if (err) {
WScript.StdErr.WriteLine("ERR: ");
for (var i in err) {
if (err[i]) {
WScript.StdErr.WriteLine(" " + i + ': ' + err[i]);
}
}
WScript.Quit(2);
}
else {
var css = tree.toCSS({
compress: args.compress
});
if (output) {
if(fso.FileExists(output))
{
var checkfile = fso.GetFile(output);
if(checkfile.Attributes & 1)
{
checkfile.Attributes = checkfile.Attributes^1
}
}
var outputfile = fso.CreateTextFile(output);
outputfile.Write(css);
outputfile.Close();
}
else {
WScript.StdOut.Write(css);
}
}
});
}
catch (e) {
WScript.StdErr.WriteLine("ERROR:");
for (var i in e) {
if (e[i]) {
WScript.StdErr.WriteLine(" " + i + ': ' + e[i]);
}
}
WScript.Quit(3);
}
// Sometimes less will return errors inside the fake HTML element
if (document._dummyElement.innerHTML && document._dummyElement.innerHTML.match(/Syntax Error/i)) {
var s = document._dummyElement.innerHTML;
s = s.replace(/<[^>]+(\/?)>/g, function (m) { return m.indexOf('/') > 0 && m !== '</label>' ? "\n" : '' });
s = s.replace(/\n+/g, '\n');
WScript.StdErr.WriteLine("ERR: ");
WScript.StdErr.WriteLine(s);
WScript.Quit(2);
}
}
</script>
</job>
lessc .CMD
::For convenience
@cscript //nologo "%~dp0lessc.wsf" %*
個less.targets
<?xml version="1.0" encoding="utf-8"?>
<Project ToolsVersion="4.0" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
<PropertyGroup>
<DotLessCompilerPath>$(SolutionDir)Build\lessc.cmd</DotLessCompilerPath>
</PropertyGroup>
<Target Name="AllLessToCss" AfterTargets="AfterBuild">
<CreateItem Include="$(ProjectDir)**\*.less">
<Output TaskParameter="Include" ItemName="LessFile" />
</CreateItem>
<Message Text="" Importance="high" />
<Message Text="Now compiling LESS files..." Importance="high" />
<Message Text="------------------------------------------------------------" Importance="high" />
<Message Text="" Importance="high" />
<Message Text="File: "%(LessFile.FullPath) ======>>>>> "%(LessFile.RootDir)%(LessFile.Directory)%(LessFile.FileName).css"" Importance="high" />
<Exec Command=""$(DotLessCompilerPath)" "%(LessFile.FullPath)" "%(LessFile.RootDir)%(LessFile.Directory)%(LessFile.FileName).css" -compress" />
<Message Text="" Importance="high" />
<Message Text="------------------------------------------------------------" Importance="high" />
<Message Text="" Importance="high" />
</Target>
</project>
一旦你創建了內部構建文件夾中的文件全,你需要修改你的ASP.NET應用程序的項目文件(即.csproj)。爲了修改項目文件,您需要在Visual Studio IDE 中卸載項目(右鍵單擊解決方案資源管理器中的項目節點並選擇「卸載項目」)。
現在再次右鍵單擊卸載的項目並選擇「編輯項目文件」。您可以前往項目文件的末尾,只是</project>
前添加以下XML代碼:
<Import Project="$(SolutionDir)Build\less.targets" />
最後,在Visual Studio中重新載入你的ASP.NET項目,構建它,如果一切正常,你會發現一個「.css」對應於您的任何ASP.NET項目LESS(.less)文件!
也許你不是在尋找......但是你會發現使用官方JavaScript編譯器編譯LESS的更好體驗。在我的情況下,我使用Windows Script Host工作,並將其集成到構建過程中。 –
@MatíasFidemraizer關心分享您的解決方案? –
@DejanS讓我檢查一下,如果分享的方式很簡單,我可以通過簡單的方式向您解釋... –