sass 不使用 gulp/plumber/browsersync 编译答案

【问题标题】：sass not compiling with gulp/plumber/browsersyncsass 不使用 gulp/plumber/browsersync 编译
【发布时间】：2017-08-10 12:25:12
【问题描述】：

我刚刚重新开始编程，并试图让 SPA 的框架继续运行。我已经到了 Gulp 正在监视我所有任务的地步。它可以识别我何时更改 HTML 并且 BrowserSync 工作正常而无需刷新。我遇到的问题与 SCSS/CSS 相关。我上次检查时它正在工作，我做了一个 npm 更新，所以现在一切都更新了。它似乎不想关注 scss 的变化。我认为这部分是由于它在文件中的链接方式，或者可能为 sass 任务设置了不正确的 gulpfile。

我的文件夹设置是：

项目应用程序 css/ scss/ 索引.html js/ gulpfile.js

有人看到我在这里没有看到的东西吗？同样，一切都加载完毕，应用了引导程序，启用了浏览器同步，但我的 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 -->

【问题讨论】：

我想补充一点，当我运行 node 或 gulp 时，我在 bash 中没有收到任何错误！

标签： javascript node.js sass gulp

【解决方案1】：

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 文件的输出。

【讨论】：

【解决方案2】：

你有这个链接：

<link rel="stylesheet" href="css/style.css">

但您的 sass 任务不会显式输出“style.css”除非您有一个 style.scss 文件，该文件通常会将所有其他 scss 文件作为部分导入（如“_colors.scss”） .请注意指示该文件是partial 的下划线。在这种情况下，gulp-sass 将创建“style.css”来导入所有这些部分。否则，它将为您的每个非部分 scss 文件创建一个 css 文件 - 但您只能链接到其中一个。

另一种选择是将您的 css 文件concat 放入一个名为“style.css”的文件中。

【讨论】：