Question

我有gulp watch任务（我猜）或编译文件的问题。我想要gulp来查看样式文件夹中的所有css文件，但是它只会更改主要的index.html文件并且我无法看到我在css文件中所做的浏览器中的更改。

gulpfile.js：

require("./gulp/tasks/styles");
require("./gulp/tasks/watch");

styles.js：

var gulp = require('gulp');
postcss = require('gulp-postcss');
autoprefixer = require('autoprefixer');
cssvars = require('postcss-simple-vars');
nested = require('postcss-nested');
cssImport = require('postcss-import');
mixins = require('postcss-mixins');

gulp.task('styles', function(){
    return gulp.src('./app/assets/styles/styles.css').pipe(postcss([cssImport, mixins, cssvars, nested, autoprefixer])).on("error", function(errorInfo){
            console.log(errorInfo.toString());
            this.emit("end");
        });
        pipe(gulp.dest('./app/temp/styles'));
        });

watch.js：

var gulp = require('gulp');
watch = require('gulp-watch');
browserSync = require('browser-sync').create();

gulp.task('watch', function(){

    browserSync.init({
        notify: false,
        server: {
            baseDir: "app"
        }
    });

     watch('./app/index.html', function() {
    browserSync.reload();
  });

watch('./app/assets/styles/**/*.css', function(){
        gulp.start('cssInject');
    });
});

gulp.task('cssInject', ['styles'], function() {
    return gulp.src('./app/temp/styles/styles.css')
    pipe(browserSync.stream());
});

_mainPhoto.css：

.main {
position: relative;


&__text {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-80%);
    width: 100%;
    text-align: center;
}

&__logo {
    font-weight: normal;
    color: #3c443d;
    font-size: 1.1rem;
    margin: 0;

    @mixin atSmall {
        font-size: 2.2rem;
    }

    @mixin atMedium {
        font-size: 3.5rem;
    }

    @mixin atLarge {
        font-size: 5.8rem;
    }

}

&__subtitle {
    font-weight: 300;
    color: #3c443d;
    font-size: 1.1rem;

    @mixin atSmall {
        font-size: 1.5rem;
    }
}

&__subsubtitle {
    color: #d4d8d6;
    text-shadow: 2px 2px 0 rgba(0, 0, 0, .2);
    max-width: 30rem;
    font-size: 1.1rem;
    margin-left: auto;
    margin-right: auto;
}

}

Bash没有显示任何错误：

$ gulp watch
[20:22:52] Using gulpfile ~\Desktop\Web developer course - mastering modern 
workflow\Projects\Project no.1\travel-site\gulpfile.js
[20:22:52] Starting 'watch'...
[20:22:52] Finished 'watch' after 86 ms
[Browsersync] Access URLs:
 -------------------------------------
       Local: http://localhost:3000
    External: http://192.168.1.14:3000
 -------------------------------------
          UI: http://localhost:3001
 UI External: http://192.168.1.14:3001
 -------------------------------------
[Browsersync] Serving files from: app

感谢您的任何提示！安

Answer 1

我认为您确实不需要require gulp-watch。您应该能够执行以下操作：

而不是

watch('./app/assets/styles/**/*.css', function(){
        gulp.start('cssInject');
    });
});

待办事项

gulp.watch(['./app/assets/styles/**/*.css'], ['cssInject']);

也就是说，当/styles目录中的css文件发生变化时，运行cssInject任务

Gulp手表/仅更改主文件而不是所有文件

1 个答案: