扩展由Gulp修改的Sass文件

Question

我遇到了一个非常奇怪的问题 gulp-sass 。本周早些时候，我的gulp sass任务按预期运行，将sass编译成css并结束任务。但是在过去的几天里，我的gulp sass运行并挂起，而SourceTree在编辑sass文件时没有显示css文件的变化。然后我安装了 gulp-debug 来调试文件路径，并且proverbs_everyday.scss的文件路径不断修改为proverbs_everyday.css。造成这种情况的原因是什么？如何解决？我的系统是Windows 10。

顺便说一下，我对SASS来说还是比较新的。

输出

C:\wamp64\www\proverbs_everyday_admin\resources>gulp minify-css
[10:01:10] Using gulpfile C:\wamp64\www\proverbs_everyday_admin\resources\gulpfile
.js
[10:01:10] Starting 'minify-css'...
[10:01:10] Finished 'minify-css' after 10 ms
[10:01:10] css_path pe\src\css\proverbs_everyday.min.css
[10:01:10] css_path pe\src\css\styles_admin_main.min.css
[10:01:10] css_path pe\src\css\styles_parsley.min.css
[10:01:10] css_path 3 items

C:\wamp64\www\proverbs_everyday_admin\resources>gulp sass
[10:02:50] Using gulpfile C:\wamp64\www\proverbs_everyday_admin\resources\gulpfile
.js
[10:02:50] Starting 'sass'...
[10:02:50] sass_path pe\src\sass\proverbs_everyday.css
[10:02:50] sass_path 1 item

咕嘟咕嘟

var gulp = require('gulp');
var debug = require('gulp-debug');
var clean_css = require('gulp-clean-css');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var sourcemaps = require('gulp-sourcemaps');
var uglify = require('gulp-uglify');
var plumber = require('gulp-plumber');
var rename = require('gulp-rename');
var del = require('del');

const NODE_PATH = './node_modules/';
const VENDOR_PATH = './vendor/';

const SASS_PATH = "./pe/src/sass/proverbs_everyday.scss";
const CSS_PATH = "./pe/src/css/**/*.css";
const COMPILED_CSS_PATH = "./pe/dist/css";


gulp.task('default', ['update-vendor', 'update-css', 'watch']);

gulp.task('watch', function()
{
    gulp.watch(SASS_PATH, ['sass']);
    gulp.watch(CSS_PATH, ['minify-css']);
});

// === manage styles started ===
gulp.task('update-css', ['clean-css', 'minify-css']);

gulp.task('clean-css', function()
{
    del.sync([
        COMPILED_CSS_PATH,
        CSS_PATH,
        '!' + COMPILED_CSS_PATH,
        '!' + CSS_PATH
    ])
});

gulp.task('minify-css', function()
{
    gulp.src(CSS_PATH)
        .pipe(clean_css({compatibility: 'ie8'}))
        .pipe(rename({suffix: '.min'}))
        .pipe(debug({title: 'css_path'}))
        .pipe(gulp.dest(COMPILED_CSS_PATH));
});

gulp.task('sass', function()
{
    gulp.src(SASS_PATH)
        .pipe(sass().on('error', sass.logError))
        .pipe(debug({title: 'sass_path'}))
        .pipe(gulp.dest(CSS_PATH));
});
// === manage styles end ===

的package.json

{
  "name": "proverbs_everyday",
  "version": "1.0.0",
  "description": "Proverbs Everyday",
  "main": "../index.php",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": ""
  },
  "keywords": [
    "proverbs-everyday",
    "proverbs",
    "everyday"
  ],
  "author": "Davina Leong",
  "license": "ISC",
  "homepage": "",
  "devDependencies": {
    "del": "^2.2.2",
    "gulp": "^3.9.1",
    "gulp-clean-css": "^2.2.1",
    "gulp-concat": "^2.6.1",
    "gulp-debug": "^3.0.0",
    "gulp-plumber": "^1.1.0",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^3.0.0",
    "gulp-sourcemaps": "^1.9.1",
    "gulp-uglify": "^2.0.0"
  },
  "dependencies": {
    "bootstrap": "^3.3.7",
    "font-awesome": "^4.7.0",
    "jquery": "^2.2.4",
    "parsleyjs": "^2.6.0",
    "sb-admin-2": "^3.3.8"
  }
}

主要SCSS

@import 'variables';
@import 'mixins';

body {
  background: $bg-body;
  color: $colour-body;
}

.navbar-default {
  background: rgba(0, 0, 0, 0.5);
  @include clear-border;
  color: $colour-navbar;
  font-family: $font-tillitium-web;

  .navbar-brand {
    @include navbar-link($colour-navbar);

    img {
      display: inline-block;
    }
  }

  .navbar-nav > li > a {
    @include navbar-link($colour-navbar);

    .visible-sm,
    .visible-xs {
      display: inline;
    }
  }

  .navbar-toggle {
    @include clear-border;

    .icon-bar {
      background-color: $colour-navbar;
    }

    &:hover {
      background: none;

      .icon-bar {
        background-color: darken($colour-navbar, 20%);
      }
    }

    &:link,
    &:active,
    &:focus,
    &:visited {
      @extend .navbar-toggle;
    }
  }
}

#search-form {
  .form-group > .form-control {
    background: transparentize($colour-navbar, 0.8);
    border: thin solid darken($colour-navbar, 20%);
    border-radius: 0;
    color: $colour-navbar;
    font-family: $font-tillitium-web;

    option {
      color: $colour-body;
    }

    @include placeholder {
      color: $colour-navbar;
    }
  }

  .btn-navbar {
    border-radius: 0;
    border: thin solid darken($colour-navbar, 20%);
    color: $colour-navbar;
    background: transparentize($colour-navbar, 0.8);

    &:hover {
      border-color: $colour-navbar;
      background: transparentize($colour-navbar, 0.6);
    }

    &:focus {
      border-color: $colour-navbar;
    }

    &:active {
      @extend .btn-navbar;
    }
  }
}

.header {
  background: $bg-header;
  background-size: cover;
  height: 300px;
}

@for $index from 1 through 3 {
  h#{$index} {
    color: $colour-heading;
    font-family: $font-arapey;
  }
}

@for $index from 4 through 6 {
  h#{$index} {
    color: $colour-heading;
    font-family: $font-tillitium-web;
  }
}

#passage_table {
  min-height: 500px;

  #passage {
    color: $colour-passage-text;
    font-family: $font-handlee;
    font-size: 12pt;
  }
}

a {
  color: $colour-link;
  text-decoration: none;

  &:hover {
    color: lighten($colour-link, 20%);
    text-decoration: none;
  }

  &:link,
  &:active,
  &:focus,
  &:visited {
    @extend a;
  }
}

.disabled-link {
  color: $colour-link-disabled;
  cursor: default;

  &:link,
  &:active,
  &focus,
  &:visited {
    @extend .disabled-link;
  }
}

.chevron-link {
  position: fixed;
  top: 55%;

  .chapter-no {
      font-family: $font-tillitium-web;
      font-size: 12pt;

      .chapter-no-xs {
          font-size: 8pt;
      }
  }
}

.date {
  padding-left: 20px;
  color: $colour-heading;
  font-family: $font-tillitium-web;
  font-size: 10pt;
}

table {
  width: 100%;
}

footer {
  margin-top: 50px;
  padding: 20px 0;
  background: rgba(219, 209, 182, 0.5);

  p {
    color: lighten($colour-heading, 30%);
    font-family: $font-tillitium-web;
    font-size: 12pt;
  }
}

variables.scss和mixins.scss中没有导入。