我把装的node附件一起放进来了,要放到 nodejs\node_modules\bbb\node_modules\grunt-contrib\node_modules
http://witcheryne.iteye.com/blog/1871683 原文中有个错误,容易误导初学者:
less public/less/base.less > public/css/base.css 应该是 lessc 编译。
最近在formdesigner中尝试使用less代替css。其中自己用node.js写了一个脚本来简化less编译操作。关于这个工具的代码,你可以在这里获取:
https://github.com/lvjian700/less2css
写本文的目的:
- 简单介绍less的使用
- 介绍如何将node.js脚本当shell使用
- 介绍node.js 拼接地址的方式
- 介绍如何使用node.js 调用shell
- 介绍如何使用node.js 监视文件改动
less 简介
如果你想写这么一段css
- #main {
- width: 960;
- padding: 50px;
- margin: 0px auto;
- }
- #main h3 {
- font-size: 20px;
- color: #3b5888;
- background-color: #ccc;
- padding: 10px;
- }
使用less你可以这么写:
- #main {
- width: @mainWidth;
- padding: 50px;
- margin: 0px auto;
- h3 {
- font-size: 20px;
- color: @titleColor;
- background-color: #ccc;
- padding: 10px;
- }
- }
这里提供的便利
- 提供变量的支持
- 更方便的方式写嵌套样式
如何使用less
1. 在html页面中嵌入less.js,动态渲染css
- <link rel="stylesheet/less" href="less/base.less" type="text/css" media="screen" title="no title" charset="utf-8">
- <script src="js/less.js" type="text/javascript" charset="utf-8"></script>
2. 使用less指令将less编译成css(这部分是我要简化的部分)
npm install less -g
less public/less/base.less > public/css/base.css
这里第二种方式是我需要简化的。
- 简化指令参数
- 监视文件改动,一旦改动,自动编译
简化指令参数:
1. 使用node.js的path包拼接文件路径:
- //js file path is ${project}/bin/less2.js
- var path = require('path');
- var public_dir = path.join(__dirname, "..", "public");
- var less_dir = path.join(public_dir, "less", "base.less");
- var css_dir = path.join(public_dir, "css", "base.css");
2. 使用exec模块调用shell
- var exec = require('child_process').exec;
- function compile_less(input_file, output_file) {
- var cmd = ['lessc ', input_file, ' > ', output_file].join('');
- exec(cmd, {encoding: 'utf-8'},
- function(error, stdout, stderr) {
- if(error !== null) {
- console.log(error);
- return;
- }
- console.log(stdout);
- });
- }
- console.log('compile ' + less_dir + ' once...');
- compile_less(less_dir, css_dir);
3. 监视文件改动
- var
- fs = require('fs');
- console.log('watching file ...');
- fs.watchFile(less_dir, {
- persistent: true,
- interval: 1000 // 1 sec
- },
- function(curr, prev) {
- console.log('the file changed, compile ...');
- compile_less(less_dir, css_dir);
- });
如何让node.js可以当shell用。
1. 获取node cmd的路径
- which node
2. 将路径加到node.js文件第一行
- #!/usr/local/bin/node
3. 为js文件添加执行权限
- chmod +x bin/less2css.js
这样可以不在使用node ***.js 来执行脚本,直接使用 bin/less2css.js即可。当然你也可以去掉*.js的后缀。
全部代码
- #!/usr/local/bin/node
- var exec = require('child_process').exec,
- path = require('path'),
- fs = require('fs')
- var public_dir = path.join(__dirname, "..", "public");
- var less_dir = path.join(public_dir, "less", "base.less");
- var css_dir = path.join(public_dir, "css", "base.css");
- function compile_less(input_file, output_file) {
- var cmd = ['lessc ', input_file, ' > ', output_file].join('');
- exec(cmd, {encoding: 'utf-8'},
- function(error, stdout, stderr) {
- if(error !== null) {
- console.log(error);
- return;
- }
- console.log(stdout);
- });
- }
- console.log('compile ' + less_dir + ' once...');
- compile_less(less_dir, css_dir);
- console.log('watching file ...');
- fs.watchFile(less_dir, {
- persistent: true,
- interval: 1000 // 1 sec
- },
- function(curr, prev) {
- console.log('the file changed, compile ...');
- compile_less(less_dir, css_dir);
- });
项目地址
https://github.com/lvjian700/less2css
参考资料
Node.js API: http://nodejs.org/api/
Less文档:http://lesscss.org/
相关推荐
我们在开发过程中广泛使用它来将 *.less 文件编译为 *.css 文件。 我们以 root 身份运行它,以便创建的文件具有正确的权限,并且可以写入我们的任何开发树。 我们的基本流程是: 在收集 .css 文件以供服务时,请...
使用nodejs安装less以及编译less文件为css文件 首先下载nodeJs的安装包,按照步骤,安装nodejs. 链接:http://pan.baidu.com/s/1dEsqYB3 密码:bkkh 这个链接里面有nodejs的安装包,大家可以直接下载下来,安装就...
将.css.styl ( )服务为已编译的.css 将.css.less ( )服务为已编译的.css 将.css.sass或.css.scss ( )服务为已编译的.css 将.jst.jade ( )用作已编译JavaScript函数(请确保包括Jade运行时-参见下文)。...
小程序开发时有时需要将less编译为css.。这是一个批量编译的代码。
lesscss 是动态的样式表语言,他让css增加变量,组合,函数,运算等语法。这个项目的网站在国内访问不到,大家都懂的。...在服务器端使用node.js来编译,node.js 使用 less的方法如下:先使用npm包
2) 首先執行node.js command prompt,在開啟的command視窗下執行 npm install less 3) 将C:\nodejs\node_modules\npm加入到环境变量中。 4) 测试: 在node.js command prompt的視窗下先切換到你要編譯的 *.less ...
构建是一个和宽泛的表述,传统理解就是编译、打包、复制,而今,随着技术越来越丰富,构建还包括对前端组件的预处理,比如sass、less预处理成css,css和js的压缩和合并。grunt的插件可以很好的支持这些新的构建概念...
gulp是新一代的前端项目构建工具,你可以使用gulp及其插件对你的项目代码(less,sass)进行编译,还可以压缩你的js和css代码,甚至压缩你的图片,gulp仅有少量的API,所以非常容易学习。 gulp 使用 stream 方式处理...
超级编译器uber 编译器使用 Google Closure 编译器、soy 模板和 LESS 编译您的客户端 JS 和 CSS。 这些是我最喜欢的用于开发精益 Web 应用程序的工具。 特征: 谷歌闭包编译器、闭包模板、LESS。 无需重新启动...
这个小助手将您的 .less 文件转换为 .css 而不依赖于 Node.js 或客户端解析。 一切都在服务器上编译,缓存,并通过 PHP 作为常规 css 提供。 安装 获取文件 Git子模块 如果您已经在使用 Git 开发应用程序,则可以将...
要编译LESS,请使用LESS的官方工具集。 安装 使用npm: npm install postcss-less --save-dev 如果您发现此模块有用,请考虑。 用法 无postcss-less的最常见用法是将PostCSS转换直接应用于LESS源。 例如。 以LESS...
gulp // gulp 压缩 js, 编译less,压缩css,合并、重命名、压缩angular文件 [dist 文件夹] 注意:**要在根路径下执行** 打开浏览器 http://localhost:8080/front-end/views/layout.html ###描述 新人练手,在学
LESS-Recursive-Compiler 是一个节点模块,它以编程方式编译指定目录中的所有 LESS 或 CSS 文件,并将它们全部放置在与源目录具有相同结构的另一个指定目录中。 版本 1.0.2 更新 1.0.3 错误修复和依赖更新 1.0.2 ...
网上有很多第三方工具帮助你编译 Less 源码。 官网地址 http://lesscss.org/ less手册 www.lesscss.net/ bootstrap官网less介绍 http://less.bootcss.com/ 一、浏览器端环境搭建 github下载地址:...
Dead Simple LESS CSS Watch编译器 该命令监视文件夹(和子文件夹)的文件更改,并将较少CSS文件自动编译为CSS。 这是一个文件系统监视程序和编译器。 如果更改了导入的(子级)LESS文件,它还将跟踪依赖关系树并...
编译 LESS CSS 和 Javascript 包,运行 linter 等(使用 grunt)并启动服务器: npm start 配置 有关有效的配置键及其默认值,请参阅 lib/server-config.js。 要设置配置值,您可以使用: npm config set ...
编译少较少编译使用Less 1.7.0的官方node.js版本进行保存时自动编译.less文件。 less文件在与.less文件相同的目录中编译为压缩的.css版本。 例如,styles.less-> styles.css 自动编译仅在扩展名为.less的文件上触发...
webstorm下搭建编译less环境 1、首先去node的主页下载对应版本的nodejs然后安装,下载地址:http://nodejs.org/ 2、安装完之后打开命令提示符(win+r),分别输入node -v以及npm -v如果返回版本号说明你安装成功了。 ...