使用基本的 gulp/express build watch 时遇到一个奇怪的错误.
Getting a strange error using a basic gulp/express build watch.
目录布局
project/
- sass/
- style.scss
- gulpfile.js
- index.html
Gulpfile.js
var gulp = require('gulp'),
sass = require('gulp-ruby-sass'),
autoprefixer = require('gulp-autoprefixer'),
minifycss = require('gulp-minify-css'),
rename = require('gulp-rename');
gulp.task('express', function() {
var express = require('express');
var app = express();
app.use(require('connect-livereload')({port: 4002}));
app.use(express.static(__dirname));
app.listen(4000);
});
var tinylr;
gulp.task('livereload', function() {
tinylr = require('tiny-lr')();
tinylr.listen(4002);
});
function notifyLiveReload(event) {
var fileName = require('path').relative(__dirname, event.path);
tinylr.changed({
body: {
files: [fileName]
}
});
}
gulp.task('styles', function() {
return gulp.src('sass/*.scss')
.pipe(sass({ style: 'expanded', sourcemap: false }))
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1'))
.pipe(gulp.dest('css'))
.pipe(rename({suffix: '.min'}))
.pipe(minifycss())
.pipe(gulp.dest('css'));
});
gulp.task('watch', function() {
gulp.watch('sass/*.scss', ['styles']);
gulp.watch('*.html', notifyLiveReload);
gulp.watch('css/*.css', notifyLiveReload);
});
gulp.task('default', ['styles', 'express', 'livereload', 'watch'], function() {
});
Style.scss
body { position: relative; }
快速服务器/livereload 工作正常,但是当它尝试编译样式表时出现此错误(即使使用 sourcemap: false)
The express server/livereload works fine, but when it tries to compile the stylesheet I'm getting this error (even with sourcemap: false)
gulp-ruby-sass: write style.css.map
events.js:72
throw er; // Unhandled 'error' event
^
Error: <LOCAL_PATH_HERE>/style.css.map:3:1: Unknown word
现在禁用源映射是个谜.你必须这样做
Disabling sourcemaps is some kind of mystery right now. You have to do it like this
.pipe(sass({ "sourcemap=none": true }))
来源
这篇关于gulp 与 gulp-ruby-sass:错误:../style.css.map:3:1:未知单词的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持html5模板网!
Browserify,Babel 6,Gulp - 传播运算符上的意外令牌Browserify, Babel 6, Gulp - Unexpected token on spread operator(Browserify,Babel 6,Gulp - 传播运算符上的意外令牌)
是否可以将标志传递给 Gulp 以使其以不同的方式Is it possible to pass a flag to Gulp to have it run tasks in different ways?(是否可以将标志传递给 Gulp 以使其以不同的方式运行任务
为什么我们需要在全局和本地安装 gulp?Why do we need to install gulp globally and locally?(为什么我们需要在全局和本地安装 gulp?)
如何一个接一个地依次运行 Gulp 任务How to run Gulp tasks sequentially one after the other(如何一个接一个地依次运行 Gulp 任务)
由于 MIME 类型而未加载样式表Stylesheet not loaded because of MIME-type(由于 MIME 类型而未加载样式表)
打开 Javascript 文件时 Visual Studio 2015 崩溃Visual Studio 2015 crashes when opening Javascript files(打开 Javascript 文件时 Visual Studio 2015 崩溃)