通过节点脚本减去CSS
find解决scheme看到这篇文章的底部
尝试使用nodeJS构build脚本来构buildLESS（less css）
我试图从less使用节点脚本来build立一个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'); }); }); });
上述解决scheme的控制台输出是：
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
然后我发现这个家伙的博客： http : //onedayitwillmake.com/blog/2013/03/compiling-less-from-a-node-js-script/并尝试以下：
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. });
用节点less的编译器构buildcss最简单的方法是什么？
解：
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)
在readFilecallback中，最可能的是你的path是错误的，文件无法打开。