简介:node express或者就是node项目中,要自动编译sass方法很多,比如gulp 比如考拉,比如今天我想说的这个包node-compass。

编译sass的三种方法:

前提条件: 都需要电脑中安装好ruby和compass.

方法一: 命令行编译sass:

 compass compile

回车确认即可生成对应的css代码。新生成的css文件与sass文件在同一目录下。这是最基础的sass编译方法。

方法二:gulp-sass

(一).前提条件:

电脑中安装有ruby,compass;

项目中已经安装与配置好基本的gulp(配置与安装本文不介绍。gulp基本用法也不介绍,不会的先去学gulp基础)

(二).下载gulp-sass包:

npm install gulp-sass --save-dev

(三).基础用法:

在你的gulpfile.js中加入以下代码:

 var gulp = require('gulp');
var sass = require('gulp-sass'); gulp.task("sass", function() {
return gulp.src("test/*.scss")
.pipe(sass().on("error", sass.logError))
.pipe(gulp.dest("public/css"));
}); 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 监视:

项目根目录下命令行:

 gulp watch

启动成功后,命令行中会显示如下信息:

然后,我在test文件夹中新建一个a.scss。并写入如下代码:

a.scss

 div{
background:red;
span{
color:green;
}
}

同步的,gulp自动在public/css文件下新建一个a.css并生成对应的css代码。

(五).其他:

gulp-sass的readme中还有这么一句:

You can also compile synchronously, doing something like this:

你也可以同步编译,如下做:

 ```javascript
'use strict'; var gulp = require('gulp');
var sass = require('gulp-sass'); gulp.task('sass', function () {
return gulp.src('./sass/**/*.scss')
.pipe(sass.sync().on('error', sass.logError))
.pipe(gulp.dest('./css'));
}); gulp.task('sass:watch', function () {
gulp.watch('./sass/**/*.scss', ['sass']);
});

无非就是把之前的sass().on()变成了sass.sync().on;然而依旧需要打开gulp watch才能自动编译。

我并没有发现2种写法在node express项目中的区别。。。。所以问题暂留,反正我目前的express网站都是用的第一种写法,gulp watch之后,都是同步编译sass。

方法三:node-compass

下文例子,皆为express generator 生成的express项目作为示范,可能由于版本不同,部分代码有所出入。若有不同自行参考修改。

(一).前提条件:

电脑中安装有ruby,compass;

如果没有,可以通过如下命令安装:

 $ gem update --system
$ gem install compass

(二).下载node-compass包:

     npm install node-compass

(三).用法:

官方readme写的最简单的用法是:

 var compass = require('node-compass');
app.configure(function() {
app.use(compass());
});

这里,我用webstorm 创建了一个新node express项目,使用express generator生成的项目,并且在最初就设置了css 为compass,所以自动在app.js中生成了相关代码:

 app.use(require('node-compass')({mode: 'expanded'}));

(四).配置

默认:

node-compass需要你的资源文件夹名为“public”,你的所有 `*.scss` 和 `*.css` 文件都需要位于  '/public/stylesheets/'.中。

其实,我们只需要创建sass文件就够了,会自动创建同名css的。

例如这个项目结构:我手工创建了style.scss文件,项目将会自动生成了style.css:(注意这里,我说的是‘将会’)

需要注意的是:不同于gulp的那种同步编译。虽然会自动生成和编译对应的css文件,但我们需要先正常的启动express项目,然后去浏览器里运行一次项目,项目中才会自动生成和编译对应css文件。

如何自定义设置资源文件夹?

可以通过给中间件传入一组设置信息的数据,改变根资源文件夹。

 compass({
project: path.join(__dirname, 'myAssets')
});

由于例子项目是通过express generator创建的,故参照上述代码新增app.js中的如下代码(黄色部分)(你的项目结构和express generator版本可能和我不同,所以仅作为参考):

 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文件夹(至于为何要新建stylesheets文件夹,请看下面的参数解释,不想看就记住必须要有stylesheets就够了),里面存放我们自己的scss文件。如果放在外面,是不会被自动编译的。我这里新建的s0.scss(直接放在myAssets之下)就没有被自动编译成css。

(四-1).配置选项

mode:

默认:compress

描述:你希望使用的输出模式

值:expanded | nested | compressed | compact

comments:

默认:false

描述:是否显示line comments

relative:

默认:true

描述:Are assets relative

css:

默认:stylesheets

描述:输出css到项目中的哪个文件夹

sass:

默认:stylesheets

描述:sass文件所在的文件夹

project:

默认:public

描述:你所有的资源存放的位置

cache:

默认:true

描述:允许/禁止 缓存

logging:

默认:false

描述:允许/禁止 控制台打印编译sass的信息。

例如:

 app.js(新增: 黄色部分。删除:无。其他修改:无)

 app.use(require('node-compass')({
project: path.join(__dirname, 'myAssets'),
mode: 'expanded',
logging: true
}));

设为true后,你会在控制台看到如下信息:

config_file:

默认:false

描述:使用有效的config.rb文件,来配置compass设置。

全文结束。

nodejs编译sass模块包 node-compass,与gulp包gulp-sass使用方法的更多相关文章

  1. node (02 CommonJs 和 Nodejs 中自定义模块)顺便讲讲module.exports和exports的区别 dependencies 与 devDependencies 之间的区别

    CommonJS 规范的提出,主要是为了弥补当前 JavaScript 没有标准的缺陷.它的终极目标就是:提供一个类似 Python,Ruby 和 Java 语言的标准库,而不只是停留在小脚本程序的阶 ...

  2. Node.js学习笔记(二) --- CommonJs和Nodejs 中自定义模块

    一. 什么是 CommonJs? JavaScript 是一个强大面向对象语言,它有很多快速高效的解释器. 然而, JavaScript标准定义的 API 是为了构建基于浏览器的应用程序.并没有制定一 ...

  3. node.js零基础详细教程(7.5):mongo可视化工具webstorm插件、nodejs自动重启模块Node Supervisor(修改nodejs后不用再手动命令行启动服务了)

    第七章 建议学习时间4小时  课程共10章 学习方式:详细阅读,并手动实现相关代码 学习目标:此教程将教会大家 安装Node.搭建服务器.express.mysql.mongodb.编写后台业务逻辑. ...

  4. Sass和Compass学习笔记系列之Sass

    最近在慕课网学习Sass和Compass,学习链接地址:https://www.imooc.com/learn/364,现在整理笔记如下: 一.使用Sass和Compass的优点: a.使用Sass和 ...

  5. 在nodejs中引进模块要经历的步骤

    在nodejs中引入模块需要经历如下3个步骤 1.路径分析 2.文件定位 3.编译执行 在nodejs中模块分为两类,一类是nodejs提供的模块,称为核心模块,另一类的用户编写的模块,称为文件模块. ...

  6. 《深入浅出Nodejs》笔记——模块机制(1)

    前言 这是我读<深入浅出Nodejs>的笔记,真是希望我的机械键盘快点到啊,累死我了. CommonJS规范 主要分为模块引用.模块定义.模块标识三个部分. 模块引用 上下文提供requi ...

  7. nodejs的require模块及路径

    在nodejs中,模块大概可以分为核心模块和文件模块. 核心模块是被编译成二进制代码,引用的时候只需require表示符即可,如(require('net')). 文件模块,则是指js文件.json文 ...

  8. nodejs 使用 js 模块

    nodejs 使用 js 模块 Intro 最近需要用 nodejs 做一个爬虫,Google 有一个 Puppeteer 的项目,可以用它来做爬虫,有关 Puppeteer 的介绍网上也有很多,在这 ...

  9. Nodejs中关于模块的总结

    关于Nodejs中的模块 概念 Nodejs在ECMAScript的基础上扩展并封装了许多高级特性,如文件访问.网络访问等,使得Nodejs成为一个很好的Web开发平台.基于Nodejs这个平台将We ...

随机推荐

  1. JSM 学习(一)

    JMS 支持两类消息传送模型:点对点模型和发布/订阅模型.又称这些消息传送模型为消息传送域.点对点模型和发布订阅模型分别缩写为p2p和Pub/Sub.发布订阅模型用于一对多消息广播,点对点模型用于一对 ...

  2. Spring 事务管理tx,aop

    spring tx:advice事务配置 2016年12月21日 17:27:22 阅读数:7629 http://www.cnblogs.com/rushoooooo/archive/2011/08 ...

  3. Java RSA公钥加密,私钥解密算法的尝试

    https://www.cnblogs.com/liemng/p/6699257.html 写这篇博客其实是有点意外的,来源最初也算是入职当前这家公司算吧,由于项目要求数据几乎都进行了加密(政府项目么 ...

  4. QML学习之浅谈Window

     转载地址:http://blog.csdn.net/kanchuan1905/article/details/53762788 在Qt Quick的世界里,Window对象用于创建一个与操作系统相关 ...

  5. MySQL中exists与in的使用

    exists对外表用loop逐条查询,每次查询都会查看exists的条件语句,当 exists里的条件语句能够返回记录行时(无论记录行是的多少,只要能返回),条件就为真,返回当前loop到的这条记录, ...

  6. 解决“检测到有潜在危险的Request.Form值”

    先看如下 web.config 的代码: <system.web>     <compilation debug="true" targetFramework=& ...

  7. Android系统init进程启动及init.rc全解析

    转:https://blog.csdn.net/zhonglunshun/article/details/78615980 服务启动机制system/core/init/init.c文件main函数中 ...

  8. springboot 监控

    一.什么是spring-boot-starter-actuator(doc) springboot项目如何检查配置与运行状态呢?官方提供了一些接口可以查看springboot项目运行情况,只需要导入s ...

  9. 有道云笔记配合MPic+七牛云 自制MarkDown文档图床(适用Typora)

    注:从有道云笔记v6.5开始,有道云笔记会员可以使用MarkDown有道自带的图床.(但是非会员可以采用下面的七牛云图床+MarkDown方法) 0x00 前言 一直用有道云笔记,粘贴图片,做笔记没问 ...

  10. windows环境下mysql的解压安装以及备份和还原

    系统环境为server2012 1.下载mysql解压版,解压安装包到指定目录 2.在以上目录中,复制一份my-default.ini文件,重命名为my.ini,进行如下修改(按照需要): [mysq ...