我刚刚回到编程并试图让SPA的骨架浮出水面。我已经到了Gulp看着我所有任务的地步。它正在识别我何时更改HTML并且BrowserSync工作正常而无需刷新。我遇到的问题是更多SCSS / CSS相关。我最后一次检查时工作,我做了一个npm更新所以现在一切都更新了。它似乎不想用scss观察变化。我认为这部分是由于它是如何在文件中链接的,或者gulpfile可能是为sass任务设置错误。
我的文件夹设置为:
项目 应用 CSS / SCSS / 的index.html JS / gulpfile.js
有人看到我在这里看不到的东西吗?同样,一切都加载,引导程序被应用,启用了browsersync,但是我的style.scss没有将任何更改缩小为CSS。
谢谢!
Gulp文件:
/* Required */
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;
var plumber = require('gulp-plumber');
var autoprefixer = require('gulp-autoprefixer');
/* Scripts Task */
gulp.task('scripts', function(){
gulp.src(['app/js/**/*.js', '!app/js/**/*min.js'])
.pipe(plumber())
.pipe(rename({suffix:'.min'}))
.pipe(uglify())
.pipe(gulp.dest('app/js'))
.pipe(reload({stream:true}));
});
/* Sass Task */
gulp.task('sass', function(){
return gulp.src('app/scss/**/*.scss')
.pipe(plumber())
.pipe(sass())
.pipe(autoprefixer('last 2 versions'))
.pipe(gulp.dest('app/css'))
.pipe(reload({stream:true}));
});
/* HTML Task */
gulp.task('html', function(){
gulp.src('app/**/*.html')
.pipe(plumber())
.pipe(reload({stream:true}));
});
/* Browser-Sync Task */
gulp.task('default', ['browser-sync'], function () {
});
gulp.task('browser-sync', function() {
browserSync.init(null, {
proxy: "http://localhost:5000",
files: ["public/**/*.*"],
browser: "opera",
port: 7000,
});
});
/* gulp.task('nodemon', function (cb) {
var started = false;
return nodemon({
script: 'server.js'
}).on('start', function () {
// to avoid nodemon being started multiple times
// thanks @matthisk
if (!started) {
cb();
started = true;
}
});
}); */
/* Watch Task */
gulp.task('watch', function(){
gulp.watch('app/js/**/*.js', ['scripts']);
gulp.watch('app/scss/**/*.scss', ['sass']);
gulp.watch('app/**/*.html', ['html']);
})
/* Default */
gulp.task('default', ['scripts', 'sass', 'html', 'browser-sync', 'watch']);
样式表包括:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<!-- Latest compiled and minified Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script> <!-- Modernizr -->
答案 0 :(得分:0)
1:所有这些sass文件的输出css在哪里?是在调用样式的html中引用的? 2:也许你错过了目标文件夹?举个例子:
gulp.src('src/scss/application.scss')
.pipe(sass({
includePaths: [
'node_modules/foundation-sites/scss',
'node_modules/compass-mixins/lib'
],
outputStyle: 'compressed'
}).on('error', sass.logError))
.pipe(gulp.dest('./public/css/'))
如果检查最后一行,我调用gulp.dest来定义sass文件的输出。
答案 1 :(得分:0)
你有这个链接:
partial
但你的sass任务没有明确输出&#34; style.css&#34; 除非你有一个style.scss文件,它通常会将所有其他scss文件导入为partials(例如&#34; _colors.scss&#34;)。请注意下划线表示该文件是concat
。在这种情况下,gulp-sass将创建&#34; style.css&#34;导入所有这些部分。否则,它将为每个非部分scss文件创建一个css文件 - 但您只链接到其中一个。
另一种方法是将{c}文件var color = (
document.querySelector('input[name="color"]:checked') || { value: 'red' }
).value;
放入一个名为&#34; style.css&#34;的文件中。