Sass 让gulp与livereload合作
我已经得到了我的Sass 让gulp与livereload合作,sass,livereload,gulp,Sass,Livereload,Gulp,我已经得到了我的Gulpfile来编译我的sass,我只是一个“实时重新加载远离转储codekit”的人。不过,我正在努力让这种风格的注入发挥作用。我正在尝试设置: 当我在终端中运行gulp时,它似乎编译了sass,但没有注入样式。我做错了什么?我在chrome+中安装了livereload扩展,包括以下节点模块: "devDependencies": { "gulp": "~3.5.0", "gulp-sass": "~0.6.0" }, "dependencies
Gulpfile
来编译我的sass
,我只是一个“实时重新加载远离转储codekit
”的人。不过,我正在努力让这种风格的注入发挥作用。我正在尝试设置:
当我在终端中运行gulp时,它似乎编译了sass,但没有注入样式。我做错了什么?我在chrome+中安装了livereload扩展,包括以下节点模块:
"devDependencies": {
"gulp": "~3.5.0",
"gulp-sass": "~0.6.0"
},
"dependencies": {
"gulp-livereload": "~0.2.0",
"tiny-lr": "0.0.5"
}
我的gulpfile看起来像这样:
var gulp = require('gulp');
//plugins
var sass = require('gulp-sass'),
lr = require('tiny-lr'),
livereload = require('gulp-livereload'),
server = lr();
gulp.task('sass', function () {
gulp.src('./scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('./'))
.pipe(livereload(server));
});
// Rerun tasks when a file changes
gulp.task('watch', function () {
server.listen(35729, function (err) {
if (err) return console.log(err);
gulp.watch('scss/**/*.scss', ['sass']);
});
});
// The default task (called when you run 'gulp' from cli)
// "sass" compiles the sass to css
// "watch" looks for filechanges, and runs tasks accordingly
gulp.task('default', ['sass', 'watch']);
非常感谢您的帮助。
谢谢 您正在运行本地主机吗?进入Chrome插件中的设置,并选中文件URL选项:chrome://extensions/如果您使用的是大口livereload
,我认为也没有必要使用微型lr
您可以在此处找到LiveReload集成的工作示例:
-SPA前端启动套件刚刚遇到了这篇精彩的教程,解释了Livereload启动和运行的所有要点:
我让gulp和livereload在不需要浏览器插件的情况下运行
var http = require('http')
, path = require('path')
, Promise = Promise || require('es6-promise').Promise
, express = require('express')
, gulp = require('gulp')
, log = require('gulp-util').log
, tinylr = require('tiny-lr')
, livereload = require('gulp-livereload')
, ROOT = 'dist'
, GLOBS = [path.join(ROOT, "/**/*")]
, PORT = 8000
, PORT_LR = PORT + 1
, app = express()
;
app.use(require('connect-livereload')({port: PORT_LR}))
app.use('/', express.static("./dist"))
http.createServer(app).listen(PORT, function() {
log("Started express server on http://localhost:" + PORT);
});
lrUp = new Promise(function(resolve, reject) {
lrServer = tinylr()
lrServer.listen(PORT_LR, function(err) {
if (err) return reject(err)
resolve(lrServer)
})
})
gulp.watch(GLOBS, function(evt) {
if (evt.type === 'deleted') return
lrUp.then(function(lrServer) {
log("LR: reloading", path.relative(ROOT, evt.path));
gulp.src(evt.path).pipe(livereload(lrServer))
})
.catch(console.log)
});
享受:)这是我的解决方案
- 只需要此npm模块
npm安装gulp-gulp-sass-gulp-livereload-express——保存开发文件
- 将Scss文件放入
/app/styles
中,将Html文件放入/app/
- 安装用于镀铬的
- 转到并激活当前选项卡的pluin
完成:-)
(不要忘记更改项目的sass设置。如果使用的是scss而不是sass,请将indentedSyntax
设置为false
)
我已经通过浏览器扩展启用了livereload,但我需要做的最后一件事是在单个选项卡上单击此按钮“激活”它。
你所说的“它不注入样式”是什么意思?是将您的sass编译到正确的目录吗?是的。我的index.html正在链接到此:当我重新加载浏览器时,样式将生效。但我必须手动操作你是不是在运行本地主机?进入Chrome中插件的设置并选中文件URLSD选项您是否已在浏览器中安装并启用livereload插件?(或者,您可以使用在没有浏览器插件的情况下将LR javascript注入到您的网页中。)如果您想使用与默认端口不同的端口,我在使用gulp livereload之前遇到过问题。使用tiny lr解决了这个问题gulp livereload在没有tiny lr的情况下运行良好:livereload=require('gulp-livereload');var lr=livereload.listen({port:12345,auto:false})。。后来。管道(livereload({端口:12345}))
var gulp = require('gulp'),
sass = require('gulp-sass'),
livereload = require('gulp-livereload');
gulp.task('sass', function() {
gulp.src('app/styles/*.sass')
.pipe(sass({
includePaths: ['app/styles'],
indentedSyntax : true,
errLogToConsole: true
}))
.pipe(gulp.dest('app/css'))
.pipe(livereload());
});
gulp.task('serve', function(done) {
var express = require('express');
var app = express();
app.use(express.static(__dirname + '/app'));
app.listen(4000, function () {
done();
});
});
gulp.task('html', function() {
gulp.src('app/**/*.html')
.pipe(livereload());
});
gulp.task('watch', function() {
gulp.watch('app/styles/*.sass', ['sass']);
gulp.watch('app/**/*.html', ['html']);
livereload.listen();
});
gulp.task('default', ['watch', 'serve']);