1. 技术文章
  2. dotless.comple.exe. Why does it stop? what im i doing wrong? Or suggest me and alternative approach

dotless.comple.exe. Why does it stop? what im i doing wrong? Or suggest me and alternative approach

由 百般思念 提交于 2019-12-08 09:33:27

问题


Im trying to compile my less file to css, im using the dotless

I installed it with the nuget. This is the settings I got setup in project "Pre-build event command line"

“$(SolutionDir)packages\dotless.1.3.1.0\tool\dotless.compiler.exe” 
“$(ProjectDir)Content\style.less” 
“$(ProjectDir)Content\style_less.css”

What happends on build is that it just opens the style.less file in notepad and just stops there. When i close the less file, it opens the output css (empty) and same story here it just stops, when i close the css it does the regular build.

Ideas? is it supose to take time? is this behavior normal?

EDIT

Is there any other approach to compile LESS in Windows environment?


回答1:


I installed Less.net manually in my project and this is in my Pre-Build event:

If "$(ConfigurationName)" == Debug (
FOR %%i IN ("$(ProjectDir)css\*.less") DO ("$(ProjectDir)Tools\dotless.Compiler.exe" "%%i" )
) Else (
FOR %%i IN ("$(ProjectDir)css\*.less") DO ("$(ProjectDir)Tools\dotless.Compiler.exe" -m "%%i" )
)

This code will look in the css folder and transform all .less files to css files, when the project is in debug mode the css will be readable otherwise it's compressed. Don't forget to change the paths so it works in your environment. If there is an error in your .less file the error and line number will be shown in the Output window.




回答2:


As I said in some question comment, because DotLess didn't work for me, I switched to other approach: compiling LESS with official LESS compiler (JavaScript one) and executed using Windows Script Host.

Create a folder inside your solution directory (i.e. where your .sln and project directories are stored for your particular solution). Call your folder as Build.

You need these scripts (create a file for each one inside Build folder, I'm giving you the whole file name):

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: &quot;%(LessFile.FullPath) ======>>>>> &quot;%(LessFile.RootDir)%(LessFile.Directory)%(LessFile.FileName).css&quot;" Importance="high" />

    <Exec Command="&quot;$(DotLessCompilerPath)&quot; &quot;%(LessFile.FullPath)&quot; &quot;%(LessFile.RootDir)%(LessFile.Directory)%(LessFile.FileName).css&quot; -compress"  />

    <Message Text="" Importance="high" />
    <Message Text="------------------------------------------------------------" Importance="high" />
    <Message Text="" Importance="high" />
  </Target>
</project>

Once you've created the whole files inside Build folder, you need to modify your ASP.NET application project file (i.e. .csproj). In order to modify project file, you need to unload your project in Visual Studio IDE (right-click on project node in your Solution Explorer and choose "Unload Project").

Now right-click again on unloaded project and choose "Edit project file". Go at the end of project file and just before </project> add the following XML code:

<Import Project="$(SolutionDir)Build\less.targets" />

Finally, reload your ASP.NET project in Visual Studio, build it and, if everything went fine, you'll find a ".css" counterpart for any of your ASP.NET project LESS (.less) files!



来源：https://stackoverflow.com/questions/13341960/dotless-comple-exe-why-does-it-stop-what-im-i-doing-wrong-or-suggest-me-and-a

标签
visual-studio
less
nuget
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!