express+ejs+sass配置
2017-12-26 本文已影响0人
maosheng
首先安装需要的依赖
npm install express ejs node-sass --save
接下来新建app.js文件并添加代码:
app.js
const express = require('express')
const app = express()
const path = require('path')
app.set('views', path.join(__dirname, 'views'))
// 设置存放视图文件的文件夹，此处设置为views
app.set('view engine', 'ejs')
// 启用ejs作为模版引擎
app.use(express.static(path.join(__dirname, 'public')))
// 设置静态文件目录, 在当前目录下新建public文件夹，网页的js，css文件都放在这个文件夹内，在页面中只需要通过'js/test.js'就可以引入
app.get('/', function (req, res) {
res.render('test')
// 这里返回一个渲染好的test视图
})
app.listen(3000, function () {
console.log('app is listening at port 3000')
})
ok, 接下来搭建视图文件test.ejs
在views文件夹内新建test.ejs文件（在根目录新建views文件夹，因为之前设置视图文件的文件路径已经定了views）
test.ejs
<!DOCTYPE html>
<html>
<head>
……
</head>
<body>
<h1>test</h1>
</body>
</html>
现在文件视图是这样的
|—public|—js(文件夹)
|……… |__css(文件夹)
|—views
| …… |_test.ejs
|___app.js
这时候在命令行输入
node app.js
再打开localhost:3000就已经可以看到test了
但是做这个的主题是配合sass，所以要有一个放sass文件的文件夹
在public文件夹下新建sass文件夹
修改app.js
app.js
const express = require('express')
const app = express()
const path = require('path')
const fs = require('fs')
const sass = require('node-sass')
app.set('views', path.join(__dirname, 'views'))
// 设置存放视图文件的文件夹，此处设置为views
app.set('view engine', 'ejs')
// 启用ejs作为模版引擎
app.use(express.static(path.join(__dirname, 'public')))
// 设置静态文件目录, 在当前目录下新建public文件夹，网页的js，css文件都放在这个文件夹内，在页面中只需要通过'js/test.js'就可以引入
app.get('/', function (req, res) {
res.render('test')
// 这里返回一个渲染好的test视图
})
// sass相关这里开始
let canSave = true // 因为我的系统下文件改变会触发两次，所以需要控制奇数次可保存，偶数次不可以，实际到每个人电脑自行调节
let watch = fs.watch( // 监听sass文件夹下文件变动，增添修改删除（这里没有做删除的相应处理）
path.resolve('./public/sass'),
function (type, filename) {
// console.log('type: ', type, ' filename: ', filename)
})
watch.on('change', function (type, filename) { // 触发change事件，文件改动，注意在不同系统中该行为可能有差异
if (canSave) { // 这里做一个单次保存的处理，因为在我的系统中一次修改触发两次change
saveCss(filename)
}
canSave = !canSave
})
function saveCss (filename) { // 使用node-sass模块进行转换，后保存至css文件夹
let suffix = path.extname(filename) // 后缀名
if (suffix !== '.sass') return
let outputName = path.resolve('./public/css/', path.basename(filename, suffix) + '.css')
sass.render({
file: path.resolve('./public/sass', filename),
outFile: outputName,
outputStyle: 'compressed',
sourceMap: true
}, function (err, result) {
if (err) {
console.log('sass render err -> ', err)
} else {
fs.writeFile(outputName, result.css, function(err){
if (err) {
console.log('write file err -> ', err)
} else {
console.log('save css success -> ', outputName)
}
});
}
})
}
// sass相关这里结束
app.listen(3000, function () {
console.log('app is listening at port 3000')
})
其实很简单的一个文件监听，然后文件改动保存之后实时编译成css保存到静态文件夹，一般的网站想要配置使用sass进行开发也可以自己搭一个简易的服务器进行实时转换
现在在sass文件中新建一个test.sass并随便编写一些sass代码。保存就会实时在css文件夹生成css文件了，注意在test.ejs中引入
