Javascript 通过节点脚本减少到css

找到解决方案请参阅本文底部

我正在尝试使用节点脚本从less构建css文件，我的文件结构无法更改，如下所示：

/public/css/app.css
/resources/assets/less/xenon.less
/quickSync/02_lessCompiler.js

less文件的内容实际上包括与.less文件本身相同级别和更高级别的其他less文件，例如：

// Import Bootstrap Variables & Mixins
@import "bs-less/variables.less";
@import "bs-less/mixins.less";

// LessHat
@import "other-less/lesshat.less";
... etc etc

通过上面的链接，我尝试了以下方法：

var less = require( 'less' );
var fs = require( 'fs' );
var path = require('path');

var basePath = __dirname + '/..';

var lessPath    = basePath + '/resources/assets/less/xenon.less',
    outputPath  = basePath + '/public/css/app.css';
fs.readFile( lessPath ,function(error,data){
    data = data.toString();
    console.log( error );
    console.log( data );

    less.render(data, function (e, css) {
        console.log( e );
        console.log( css );
        fs.writeFile( outputPath, css, function(err){
            if( err ){
                console.log(err );
            }
            console.log('done');
        });
    });
});

var less = require( 'less' );
var fs = require( 'fs' );
var path = require('path');
var lessPath    = basePath + '/resources/assets/less/xenon.less',
    outputPath  = basePath + '/public/css/app.css';

//ensure directory exists
var ensureDirectory = function (filepath) {
    var dir = path.dirname(filepath);
    var existsSync = fs.existsSync || path.existsSync;
    if (!existsSync(dir)) {
        fs.mkdirSync(dir);
    }
};

fs.readFile( lessPath, function(error, data){

        var dataString = data.toString();


        var options = {
            paths         : [basePath + '/resources/assets/less'],  // .less file search paths
            outputDir     : basePath + '/public/css',               // output directory, note the '/'
            optimization  : 1,                                      // optimization level, higher is better but more volatile - 1 is a good value
            filename      : "xenon.less",                              // root .less file
            compress      : false,                                  // compress?
            yuicompress   : false                                   // use YUI compressor?
        };

        console.log( options );

        options.outputDir = path.resolve( process.cwd(), options.outputDir) + "/";
        ensureDirectory( options.outputDir );

        var parser = new less.Parser(options);
        console.log( 'parsing' );
        parser.parse( dataString, function ( error, cssTree ) {
            if ( error ) {
                console.log( 'Error compiling less:' );
                console.log( error );
                return false;
            }

            // Create the CSS from the cssTree
            var cssString = cssTree.toCSS({
                compress: options.compress,
                yuicompress: options.yuicompress
            });

            fs.writeFile(outputPath, cssString, function (err) {
                logTime('Compiled less: ' + outputPath);
                //run the mai passed callback function
                callback();
            });
        });
    });

上述解决方案的控制台输出为：

null
// Import Bootstrap Variables & Mixins
@import "bs-less/variables.less";
@import "bs-less/mixins.less";

// LessHat
@import "other-less/lesshat.less";

// Xenon Basic UI
@import "xenon-core.less";

// Forms
@import "xenon-forms.less";

// Xenon Extra Components
@import "xenon-components.less";

// Xenon Skins
@import "xenon-skins.less";
{ [Error: 'xenon-skins.less' wasn't found. Tried - xenon-skins.less,xenon-skins.less]
  type: 'File',
  filename: 'input',
  index: 311,
  line: 18,
  callLine: NaN,
  callExtract: undefined,
  column: 0,
  extract: [ '// Xenon Skins', '@import "xenon-skins.less";', undefined ],
  message: '\'xenon-skins.less\' wasn\'t found. Tried - xenon-skins.less,xenon-skins.less',
  stack: undefined }
undefined
done

但是，输出文件只是读取

undefined

undefined

然后我找到了这个家伙的博客：并尝试了以下方法：

var less = require( 'less' );
var fs = require( 'fs' );
var path = require('path');

var basePath = __dirname + '/..';

var lessPath    = basePath + '/resources/assets/less/xenon.less',
    outputPath  = basePath + '/public/css/app.css';
fs.readFile( lessPath ,function(error,data){
    data = data.toString();
    console.log( error );
    console.log( data );

    less.render(data, function (e, css) {
        console.log( e );
        console.log( css );
        fs.writeFile( outputPath, css, function(err){
            if( err ){
                console.log(err );
            }
            console.log('done');
        });
    });
});

var less = require( 'less' );
var fs = require( 'fs' );
var path = require('path');
var lessPath    = basePath + '/resources/assets/less/xenon.less',
    outputPath  = basePath + '/public/css/app.css';

//ensure directory exists
var ensureDirectory = function (filepath) {
    var dir = path.dirname(filepath);
    var existsSync = fs.existsSync || path.existsSync;
    if (!existsSync(dir)) {
        fs.mkdirSync(dir);
    }
};

fs.readFile( lessPath, function(error, data){

        var dataString = data.toString();


        var options = {
            paths         : [basePath + '/resources/assets/less'],  // .less file search paths
            outputDir     : basePath + '/public/css',               // output directory, note the '/'
            optimization  : 1,                                      // optimization level, higher is better but more volatile - 1 is a good value
            filename      : "xenon.less",                              // root .less file
            compress      : false,                                  // compress?
            yuicompress   : false                                   // use YUI compressor?
        };

        console.log( options );

        options.outputDir = path.resolve( process.cwd(), options.outputDir) + "/";
        ensureDirectory( options.outputDir );

        var parser = new less.Parser(options);
        console.log( 'parsing' );
        parser.parse( dataString, function ( error, cssTree ) {
            if ( error ) {
                console.log( 'Error compiling less:' );
                console.log( error );
                return false;
            }

            // Create the CSS from the cssTree
            var cssString = cssTree.toCSS({
                compress: options.compress,
                yuicompress: options.yuicompress
            });

            fs.writeFile(outputPath, cssString, function (err) {
                logTime('Compiled less: ' + outputPath);
                //run the mai passed callback function
                callback();
            });
        });
    });

但是，此输出是一个错误：

D:\myproject\node_modules\less\lib\less\parser\parser.js:117
            imports.contents[fileInfo.filename] = str;
                   ^

TypeError: Cannot read property 'contents' of undefined
    at Object.Parser.parse (D:\myproject\node_modules\less\lib\less\parser\parser.js:117:20)
    at D:\myproject\quickSync\02_lessCompiler.js:51:16
    at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:380:3)

这让我发疯了，你只要说：

require('node-sass').render({
        file: scssPath,
        outFile: outputPath,
        outputStyle: 'expanded',
        sourceComments: true
    }, function( err, result ){
  //write result to disk.
});

使用无节点编译器构建css最简单的方法是什么

解决方案：

 fs.readFile( lessPath ,function(error,data){
        data = data.toString();

        less.render(data, {
            paths: [ basePath + '/resources/assets/less/' ]
        },function (e, css) {
            fs.writeFile( outputPath, css.css, function(err){
                if( err ){
                    console.log(err );
                }
                console.log('done');
            });
        });
    });

---

第一个在这里工作，也许你应该

console.log(error)

---

在readFile回调中，很可能是您的路径错误，无法打开文件。

您确定路径正确吗？您可以在第一个解决方案中转储

error

变量吗？您需要传递到less.render.Hi Jan，我已经添加了第一个解决方案中的控制台输出，它没有找到相对于基本less文件的路径。我假设这是您提到的搜索路径，我如何将其添加到第一个解决方案中？已解释了正确的解决方案。我已在控制台登录到第一个解决方案时添加了一组。。。它找不到与主less文件本身在同一文件夹中的导入：/I现在明白了。您使用的节点版本是什么？我让它工作了！第一个解决方案需要“路径”参数以完全限定的路由传入。干杯