我在mac上安装了node.js / stylus / nib,我可以在命令行上手动将.styl
文件编译为.css
。我也知道当stylus.middleware()
更改时我搜索如何设置自动编译时会出现这种.styl
事情,但是我不知道我应该如何实现它(我有从未使用过node.js。)
我将该代码放入哪个文件?
如何启动此代码以便始终运行?
我认为我在节点方面缺少一些能够设置它的东西。
答案 0 :(得分:26)
从命令行可以使用:
stylus -w folder/
或仅为另一个例子:
stylus -w styl/*.styl -o css/
它会监视更改并编译该文件夹下的所有* .styl文件。
答案 1 :(得分:9)
如果您将stylus
安装为全局程序包(npm install stylus -g
),则系统上会有一个手写笔二进制文件。
$ stylus -h
Usage: stylus [options] [command] [< in [> out]]
[file|dir ...]
Commands:
help [<type>:]<prop> Opens help info at MDC for <prop> in
your default browser. Optionally
searches other resources of <type>:
safari opera w3c ms caniuse quirksmode
Options:
-i, --interactive Start interactive REPL
-u, --use <path> Utilize the stylus plugin at <path>
-U, --inline Utilize image inlining via data uri support
-w, --watch Watch file(s) for changes and re-compile
-o, --out <dir> Output to <dir> when passing files
-C, --css <src> [dest] Convert css input to stylus
-I, --include <path> Add <path> to lookup paths
-c, --compress Compress css output
-d, --compare Display input along with output
-f, --firebug Emits debug infos in the generated css that
can be used by the FireStylus Firebug plugin
-l, --line-numbers Emits comments in the generated css
indicating the corresponding stylus line
--include-css Include regular css on @import
-V, --version Display the version of stylus
-h, --help Display help information
答案 2 :(得分:6)
这简要介绍了一些Node的基础知识。
<强> 0。组织代码。将主节点应用程序代码放入项目根目录中名为app.js
的文件中是一种惯例。
在app.js内部,事物分为两大部分:
<强> 1。在构建应用程序时将Stylus编译为CSS。我们需要stylus模块。通常这是在app.js的顶部完成的,以保持依赖关系。
var stylus = require('stylus');
Node第一次运行app.js
时,您需要使用此JS模块来构建CSS。这是基本的想法:
stylus.render(stylus-code-string, function(err, css) {
if (err) throw err;
console.log(css);
});
要使用Node的强大功能,您应该使用fs module将触控笔文件读入缓冲区,然后将其转换为字符串,最后将其传递给stylus.render()
。然后,将结果发送到目标文件。由于这是构建过程的一部分,因此它可以是同步的。但这不是你的问题......
<强> 2。使用Stylus作为后台进程自动编译CSS。
此函数生成一个child_process,用于监视单个.styl
文件,并将包含的.styl
文件编译为.css
文件。您不需要一个模块,只安装手写笔可执行文件,以便它在命令行上运行。 (你已经这样做了)。此示例是使用手写笔版本 0.5.0 制作的。此外,您使用的文件夹路径(例如build/styles
和styles
)也需要存在。
function watchStyles(sourcefile, destinationfolder) {
var Stylus = child_process.spawn('stylus', ['--sourcemap', '-w', sourcefile, '--out', destinationfolder]);
Stylus.stdout.pipe(process.stdout); // notifications: watching, compiled, generated.
Stylus.stderr.pipe(process.stdout); // warnings: ParseError.
Stylus.on('error', function(err) {
console.log("Stylus process("+Stylus.pid+") error: "+err);
console.log(err);
});
// Report unclean exit.
Stylus.on('close', function (code) {
if (code !== 0) {
console.log("Stylus process("+Stylus.pid+") exited with code " + code);
}
});
}
接下来,您需要在启动应用后的某个时间调用此功能。传入您的主.styl
文件作为来源。然后是您想要CSS的目标目录。
// check that you passed '-w' parameter
if (process.argv[2] && (process.argv[2] == "-w")) {
watchStyles('styles/app.styl', 'build/styles');
}
运行以下命令启动应用:
$ node app.js -w
将.styl
文件整理到一个app.styl
下会有帮助,以便app.styl
的内容如下所示:
@import 'layout'
@import 'header'
@import 'main'
@import 'footer'
@import 'modal'
@import 'overrides'
答案 3 :(得分:2)
** 我昨天到了这里,但找不到合适的答案。所以这个跟进对于跟我走同样道路的其他人来说...... **
我在设置stylus命令行时遇到了问题。我一直试图在全球范围内安装stylus
$ npm install -g stylus
并会得到错误。我让它在grunt-contrib-stylus
的一个项目中工作但是通过命令行我没有得到任何工作
即使$stylus --version
也没有返回任何内容。我尝试更新npm
并且它已损坏npm
,因此我最终重新安装node
以重新安装npm
。然后我能够全新安装$ sudo npm install -g stylus
并获得--version
我还必须通过grunt
...
npm
以及我在全球安装的所有其他内容
答案 4 :(得分:2)
首先,如果没有,请在本地安装手写笔npm install stylus --save-dev
。
创建一个启动脚本,用于构建样式表并在主样式文件中检测到更改时重建:
<强> startup.js 强>
var fs = require('fs')
var stylus = require('stylus')
// Define input filename and output filename
var styleInput = __dirname + '/dev/stylus/main.styl'
var styleOutputFilename = 'main.css'
var styleOutput = __dirname + '/static/' + styleOutputFilename
var stylusPaths = [__dirname + '/dev/stylus', __dirname + '/dev/stylus/libs']
// Build stylesheet on first execute
buildStyles(styleInput, styleOutput, stylusPaths)
// Watch stylus file for changes.
fs.watch(styleInput, function(eventType, filename) {
if (filename) {
buildStyles(styleInput, styleOutput, stylusPaths)
} else {
console.log('no filename found. probably platform doesnt support it.');
}
});
function buildStyles(input, output, paths) {
stylus(fs.readFileSync(input, 'utf-8'))
.set('paths', paths)
.set('include css', true)
.set('watch', true)
.render(function(err, css) {
if (err) throw err;
fs.writeFile(output, css, (err) => {
if (err) throw err;
console.log(' Stylesheet built successfully.');
});
});
}
在终端中输入node startup.js
。您将看到一条消息“样式表已成功构建”。无论何时更改主手写笔文件。
There is good documentation about stylus javascript api in their website.
答案 5 :(得分:0)
好的,我编辑了我的答案,因为你不想制作一个主页,然后连接 - 资产毫无意义,也无法帮助你......但也许这个,......
http://thechangelog.com/post/3036532096/stylus-expressive-robust-feature-rich-css-language
在该网站上,您会在底部找到一个视频,该视频显示如何通过命令行使用手写笔...
HTH抱歉误解了......