Question

我有两个问题，那就是吞口香糖手表

1-当我保存sass文件时，gulp创建了一个额外的css文件夹，而我已经有了一个

2- gulp手表仅监视我的style.scss，而不监视其他文件夹中的其他文件

我的项目结构

assets
   css
     style.css
   sass
     1-basics
         _base.scss
         _colors.scss
     2-layout
         _grid.scss
         _header.scss
   style.scss

index.html

gulp

const gulp          = require('gulp');
const watch         = require('gulp-watch');
const sass          = require('gulp-sass');
const bs            = require('browser-sync').create();

gulp.task('browser-sync', ['sass'], function() {
    bs.init({
        server: {
            baseDir: "./"
        }
    });
});

gulp.task('sass', function () {
    return gulp.src('assets/sass/**/*style.scss')
                .pipe(sass())
                .pipe(gulp.dest('./assets/css'))
                .pipe(bs.reload({stream: true}));
});

gulp.task('watch', ['browser-sync'], function () {
    gulp.watch("assets/sass/**/*style.scss", ['sass']);
    gulp.watch("*.html").on('change', bs.reload);
});

Answer 1

我修改了部分代码，请参见注释：

const gulp          = require('gulp');

// you are not using the following require, gulp.watch is not the watch plugin below
// it is a function of the gulp object required above
//  const watch         = require('gulp-watch');

const sass          = require('gulp-sass');
const bs            = require('browser-sync').create();

gulp.task('browser-sync', ['sass'], function() {
    bs.init({
        server: {
            baseDir: "./"
        }
    });

    // note I moved the watch tasks to within the browser-sync task
    // and changed the sass watch glob below
    // so it watches both the partials and style.scss

    gulp.watch("assets/sass/**/*.scss", ['sass']);
    gulp.watch("*.html").on('change', bs.reload);
});

gulp.task('sass', function () {
    // this appears to be the correct path to your style.scss file
    return gulp.src('assets/style.scss')
                .pipe(sass())

                // with the change to the gulp.src above, now the gulp.dest is correct
                //  before you had a globstar ** and that effects the base directory
                //  that will be used below.  Without the globstar it is a little easier
                .pipe(gulp.dest('./assets/css'))
                .pipe(bs.reload({stream: true}));
});

// moving the watch tasks now allows this simple default task
gulp.task('default', ['browser-sync']));

// below not needed now
//gulp.task('watch', ['browser-sync'], function () {
    //gulp.watch("assets/sass/**/*style.scss", ['sass']);
    //gulp.watch("*.html").on('change', bs.reload);
//});

Gulp Sass Watch创建新的CSS文件夹

1 个答案: