Node.js 常用开发工具的...
?_ijt=ccijriv1lu7n8ahjg34jbrufj0
这个是什么东西。windows下的WebStorm 为什么没有
08月20日 回答
同学你好。针对你的提问，我认识是因为mac的自带文件导致的。如果你启动的时候是点击编辑器里右上角的浮动浏览器（chrome，firefox等），确实会这样，你可以自行打开浏览器，输入网址即可。
08月20日 回答
嗯，不但预览是，run也是一样，可能是这么说是Mac自带，挺烦人。。。谢谢拉
11月29日 回答
不对啊！同学，我windows下也有，那个应该是webstorm自带web服务器的认证令牌，只有用那个令牌访问一次，这个链接才是合法的，第二次以后就不用了，但换成新链接还是需要的。
Node.js 常用开发工具的...
服务热线:400-678-8266当前位置： →
→ WebStorm 7.0 支持更多的Web技术
WebStorm 7.0 支持更多的Web技术
& 作者及来源： 稻草人.Net - 博客园 &
&收藏到→_→：
摘要: WebStorm 7.0 支持更多的Web技术
"WebStorm 7.0 支持更多的Web技术"：：
jetbrains刚刚发布了webstorm 7.0 ga，支持ejs、mustache、handlebars、web组件、stylus、karma、istanbul、compass，并增强了很多功能。
　　在beta版发布之后不久，jetbrains就发布了webstorm 7.0，这是一款基于intellij idea的ide，能够使用javascript、html、css、coffeescript、dart以及typescript等多种其他的web技术创建。
　　webstorm 7.0 支持：
嵌入式javascript (ejs)、mustache和handlebars模板
部分支持stylus，支持代码完成、格式化、语法高亮和css编辑
karma test runner和istanbul代码覆盖工具
compass，一个css编写框架
　　webstorm 7.0集成了一个节点包管理器，一个重新设计的rest客户端ui和chrome调试器，支持最新版本的webkit远程调试和v8调试协议，支持直接来自于ide的github拉请求。该ide还为那些喜欢使用命令行执行某些操作的用户提供了一个终端窗口。
　　在语言提升方面，最引人注意的可能是那些与coffeescript和dart相关的提升，但是我们也不能忽略了对最新的typescript 0.9的支持。全屏模式支持所有的平台也是一个非常有趣的新增功能。
　　在过去的12个月里面（号之后）购买了许可的用户可以免费升级到webstorm 7.0。该ide有针对商业、个人和学术使用的付费版本，有针对学校、开源项目和mvp使用的免费版本。
　　查看英文原文：webstorm 7.0 adds support for even more web technologies搜索此文相关文章：此文来自: 马开东博客
网址: 站长QQ
WebStorm 7.0 支持更多的Web技术_博客园相关文章
博客园_总排行榜
博客园_最新
博客园_月排行榜
博客园_周排行榜
博客园_日排行榜简介：node express或者就是node项目中，要自动编译sass方法很多，比如gulp 比如考拉，比如今天我想说的这个包node-compass。
编译sass的三种方法：
前提条件： 都需要电脑中安装好ruby和compass.
方法一： 命令行编译sass:
1 compass compile
回车确认即可生成对应的css代码。新生成的css文件与sass文件在同一目录下。这是最基础的sass编译方法。
方法二：gulp-sass
(一).前提条件：
电脑中安装有ruby,
项目中已经安装与配置好基本的gulp（配置与安装本文不介绍。gulp基本用法也不介绍，不会的先去学gulp基础）
(二).下载gulp-sass包：
npm install gulp-sass --save-dev
(三).基础用法：
在你的gulpfile.js中加入以下代码：
1 var gulp = require('gulp');
2 var sass = require('gulp-sass');
4 gulp.task("sass", function() {
return gulp.src("test/*.scss")
.pipe(sass().on("error", sass.logError))
.pipe(gulp.dest("public/css"));
10 gulp.task('watch', function () {
gulp.watch("test/*.scss", ["sass"]);
&&------------------------------------------------------------------------------------------
解释：头两句引入模块，没啥可说的。
第5句：gulp.src() 里面参数为你的sass文件路径，比如"test/a.scss"--表示自动编译test文件夹下的a.scss。如果需要编译该文件夹下的所有scss文件，则用*表示所有：test/*.scss.
第6句： 照着写。具体参数解释我也不晓得，readme里没写，我暂时也不想去找是啥意思。
第7句： gulp.dest()中的参数为编译好的css文件所在的文件夹，不需要具体指定到文件名。因为gulp会自动生成一个与对应sass同名的css放在这个文件夹中,所以也不需要你事先手工创建css文件。
第10~12句： 我们当然要用watch来监视所有改动的sass文件。[watch不会用的，先去看看gulp基础吧]。watch()的第一个参数，放入所有需要被监视的sass,一般来说，与第5句的参数一样
------------------------------------------------------------------------------------
&(四).启动gulp 监视：
项目根目录下命令行：&
1 gulp watch
启动成功后，命令行中会显示如下信息：
然后，我在test文件夹中新建一个a.scss。并写入如下代码：
background:
同步的，gulp自动在public/css文件下新建一个a.css并生成对应的css代码。
(五).其他：
gulp-sass的readme中还有这么一句：
You can also compile synchronously, doing something like this:
你也可以同步编译，如下做：
1 ```javascript
2 'use strict';
4 var gulp = require('gulp');
5 var sass = require('gulp-sass');
7 gulp.task('sass', function () {
return gulp.src('./sass/**/*.scss')
.pipe(sass.sync().on('error', sass.logError))
.pipe(gulp.dest('./css'));
13 gulp.task('sass:watch', function () {
gulp.watch('./sass/**/*.scss', ['sass']);
无非就是把之前的sass().on()变成了sass.sync().然而依旧需要打开gulp watch才能自动编译。
我并没有发现2种写法在node express项目中的区别。。。。所以问题暂留,反正我目前的express网站都是用的第一种写法，gulp watch之后，都是同步编译sass。
方法三：node-compass
下文例子，皆为express generator 生成的express项目作为示范，可能由于版本不同，部分代码有所出入。若有不同自行参考修改。
(一).前提条件：
电脑中安装有ruby,
如果没有，可以通过如下命令安装：
1 $ gem update --system
2 $ gem install compass
(二).下载node-compass包：
npm install node-compass
(三).用法：
官方readme写的最简单的用法是：
1 var compass = require('node-compass');
2 app.configure(function() {
app.use(compass());
这里，我用webstorm 创建了一个新node express项目，使用express generator生成的项目，并且在最初就设置了css 为compass,所以自动在app.js中生成了相关代码：
1 app.use(require('node-compass')({mode: 'expanded'}));
node-compass需要你的资源文件夹名为&public&,你的所有&`*.scss` 和 `*.css` 文件都需要位于 &'/public/stylesheets/'.中。
其实，我们只需要创建sass文件就够了，会自动创建同名css的。
例如这个项目结构：我手工创建了style.scss文件，项目将会自动生成了style.css:（注意这里，我说的是&将会&）
需要注意的是：不同于gulp的那种同步编译。虽然会自动生成和编译对应的css文件，但我们需要先正常的启动express项目，然后去浏览器里运行一次项目，项目中才会自动生成和编译对应css文件。
如何自定义设置资源文件夹？
可以通过给中间件传入一组设置信息的数据，改变根资源文件夹。
1 compass({
project: path.join(__dirname, 'myAssets')
由于例子项目是通过express generator创建的，故参照上述代码新增app.js中的如下代码（黄色部分）（你的项目结构和express generator版本可能和我不同，所以仅作为参考）：
1 app.use(require('node-compass')({
project: path.join(__dirname, 'myAssets'),
mode: 'expanded'
再在项目根目录下新建文件夹myAssets,再在其中新建文件夹stylesheets，里面新建一个s1.scss文件。重启一下express项目，浏览器里刷新一道。现在stylesheets中已经自动新建了s1.css。
这样，我就能自动编译myAssets/stylesheets文件夹下的所有scss文件了。
需要注意的是：本例中，自定义设置了根资源文件夹为myAssets，它里面还需要新建一个名为stylesheets文件夹()，里面存放我们自己的scss文件。如果放在外面，是不会被自动编译的。我这里新建的s0.scss（直接放在myAssets之下）就没有被自动编译成css。
(四-1).配置选项
默认：compress
描述：你希望使用的输出模式
值：expanded | nested | compressed | compact
&comments:
默认：false
描述：是否显示line comments
默认：true
描述：Are assets relative
默认：stylesheets
描述：输出css到项目中的哪个文件夹
默认：stylesheets
描述：sass文件所在的文件夹
默认：public
描述：你所有的资源存放的位置
默认：true
描述：允许/禁止 缓存
默认：false
描述：允许/禁止 控制台打印编译sass的信息。
　app.js(新增： 黄色部分。删除：无。其他修改：无)
1 app.use(require('node-compass')({
project: path.join(__dirname, 'myAssets'),
mode: 'expanded',
logging: true
设为true后，你会在控制台看到如下信息：
&config_file:
默认：false
描述：使用有效的config.rb文件，来配置compass设置。
全文结束。
阅读(...) 评论()Scss开发利器Compass - 为程序员服务
Scss开发利器Compass
一.何为Compass
Compass is an open-source CSS Authoring Framework.
Compass是一个开源的CSS创作框架。
Compass = Sass framework powered by community
Compass特点
* 拥有内建的CSS3 mixins
* 很多的实用的CSS取代方法
* 很多辅助工具
* 输出SASS文件为压缩的CSS
二.安装Compass建立项目
1.安装Compass
Compass需要运行在Ruby环境下，必须确定本地已经安装Ruby。
$ gem update --system
$ gem install compass
2.建立项目
$ gem compass create myproject
在config.rb配置文件中，可以修改一些基础配置
3.实时编译Scss文件
cd myproject
compass watch
每次保存完scss文件，compass会实时编译生成css文件。
三.Compass核心框架
说实话开始我很厌烦CSS3的原因在于我要花费很多时间来处理不同浏览器属性，如：-webkit， -moz等等。
-moz-border-radius:5
-webkit-border-radius:5
-o-border-radius:5
-ms-border-radius:5
-khtml-border-radius:5
border-radius:5px
CSS3的渐变色
#linear-gradient {
background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #ffffff), color-stop(100%, #dddddd));
background-image: -webkit-linear-gradient(left top, #ffffff, #dddddd);
background-image: -moz-linear-gradient(left top, #ffffff, #dddddd);
background-image: -o-linear-gradient(left top, #ffffff, #dddddd);
background-image: -ms-linear-gradient(left top, #ffffff, #dddddd);
background-image: linear-gradient(left top, #ffffff, #dddddd);
面对这样繁琐的浏览器属性谁的头都会大，看看Compass是怎样一句话解决的。
@import "compass/css3"
@include border-radius(5px);
#linear-gradient { @include background-image(linear-gradient(left top, white, #dddddd)); }
在官网上也有很多渐变的Demo，还有圆角等等。
更多的Compass CSS3请到。
你还在厌烦CSS3不同浏览器属性吗？快来用Compass吧！
2.Typography （文字基础样式）
* Vertical Rhythm
官网有详细的
3.Utilities（实用工具）
里面有个最实用的功能当属sprite。
你在还在一点一点的拼sprite图吗？快用Compass吧。
我们只要把小图放在一个文件夹里，compass会自动合并并计算出位置。
import "icon/*.png";
@include all-icon-
compass生成后的CSS，强的一米。
.icon-sprite,
.icon-delete,
.icon-edit,
.icon-new,
.icon-save
{ background: url('/images/icon-s34fe0604ab.png') no- }
.icon-delete { background-position: 0 0; }
.icon-edit
{ background-position: 0 -32 }
{ background-position: 0 -64 }
.icon-save
{ background-position: 0 -96 }
@import "compass/reset"
一句话把所有的reset搞定
Compass也提供layout布局，简单看了，貌似用处不大
四.Blueprint Module
Compass里面带有Blueprint框架，在建立项目的时候可以直接应用到项目中。
$ compass create my_project --using blueprint
$ cd my_project
向已建立的项目中加入Blueprint
$ compass install blueprint
具体的试用可以到上去查询。
你可以去github上引用他人已经做好的效果，比如
六.Firebug
如何在firebug中看到Scss，而不是生成的Css呢。我们就可以安装。
还需要在Scss配置文件中修改，打开项目目录下的config.rb。添加
sass_options = {:debug_info =& true}
这样我们就能在firebug里面看到Sass的行号了。
有个很不错的Sass&Compass的分享，讲的很详细也很实在。（好像需要翻墙）
i like user experience
原文地址：, 感谢原作者分享。
您可能感兴趣的代码