代码之家  ›  专栏  ›  技术社区  ›  Codehan25

吞下Sass:更改不会转移到前端

  •  1
  • Codehan25  · 技术社区  · 6 年前

    我的gulp sass配置会发生以下情况:

    当我执行任务时,会生成.min.css,但是在前端看不到更改。只有手动进入.min.css并保存它们之后,前端中的更改才可见。

    这是我的gulpfile.js:

        // Load plugins
        const autoprefixer = require("gulp-autoprefixer");
        const browsersync = require("browser-sync").create();
        const cleanCSS = require("gulp-clean-css");
        const gulp = require("gulp");
        const header = require("gulp-header");
        const plumber = require("gulp-plumber");
        const rename = require("gulp-rename");
        const sass = require("gulp-sass");
        const pkg = require("./package.json");
    
        sass.compiler = require('node-sass');
    
    
        // Copy third party libraries from /node_modules into /vendor
        gulp.task("vendor", function(cb) {
          // Bootstrap
          gulp
            .src([
              "./node_modules/bootstrap/dist/**/*",
              "!./node_modules/bootstrap/dist/css/bootstrap-grid*",
              "!./node_modules/bootstrap/dist/css/bootstrap-reboot*"
            ])
            .pipe(gulp.dest("./files/theme/vendor/bootstrap"));
    
          // jQuery
          gulp
            .src([
              "./node_modules/jquery/dist/*",
              "!./node_modules/jquery/dist/core.js"
            ])
            .pipe(gulp.dest("./vendor/jquery"));
    
          cb();
        });
    
    
        function css(){
            return gulp.src('./files/theme/scss/*.scss')
            .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
            .pipe(
              autoprefixer({
                browsers: ["last 2 versions"],
                cascade: false
              })
            )
            .pipe(gulp.dest('./files/theme/css'))
            .pipe(
              rename({
                suffix: ".min"
              })
            )
            .pipe(cleanCSS())
            .pipe(gulp.dest("./files/theme/css"))
            .pipe(browsersync.stream());
        }
    
        // Tasks
        gulp.task("css", css);
    
        // BrowserSync
        function browserSync(done) {
          browsersync.init({
            server: {
              baseDir: "./files/theme"
            }
          });
          done();
        }
    
        // BrowserSync Reload
        function browserSyncReload(done) {
          browsersync.reload();
          done();
        }
    
        // Watch files
        function watchFiles() {
          gulp.watch("./files/theme/scss/**/*", css);
          gulp.watch("./files/theme/**/*.html", browserSyncReload);
          gulp.watch("./templates/*.html5", browserSyncReload);
        }
    
        gulp.task("default", gulp.parallel("vendor", css));
    
        // dev task
        gulp.task("dev", gulp.parallel(watchFiles, browserSync));
    
    0 回复  |  直到 6 年前