Question

在将gulp迁移到gulp 4之后，终端在一次更改\保存到scss文件后，会连续输出“开始”和“完成”。 这正常吗？脚本正在执行此任务，但是无限输出似乎不正确。我的脚本很小，所以也许有人看到我看不到的东西。我的站点在绑定设置为IP地址的localhost IIS 7.5网站上运行。非常感谢您的帮助。谢谢！

添加的唯一gulp迁移是 gulp.series（'css'）

var sitename = 'mysitename';

var gulp = require('gulp'),
autoprefixer = require('autoprefixer'),
browserSync = require('browser-sync').create(),
postcss = require('gulp-postcss'),
sass = require('gulp-sass'),
sourcemaps = require('gulp-sourcemaps'),
newer = require('gulp-newer'),

// Name of working theme folder
root = '../' + sitename + '/',
scss = root + 'sass/';

// CSS via Sass and Autoprefixer
gulp.task('css', function() {
    return gulp.src(scss + '{style.scss,rtl.scss}')
    .pipe(sourcemaps.init())
    .pipe(sass({
        outputStyle: 'compressed', 
        indentType: 'tab',
        indentWidth: '1'
    }).on('error', sass.logError))
    .pipe(postcss([
        autoprefixer('last 2 versions', '> 1%')
    ]))
    .pipe(sourcemaps.write(scss + 'maps'))
    .pipe(gulp.dest(root + '/dist/css/'))
    //.pipe(browserSync.stream());
});

// Watch everything
gulp.task('watch', function() {
    browserSync.init({ 
        open: 'external',
        host: 'example.com',
        proxy: 'example.com',
        port: 80
    });
    gulp.watch([root + '**/*.css', root + '**/*.scss' ], gulp.series('css') );
    gulp.watch(root + '**/*').on('change', browserSync.reload);
});
gulp.task('default', gulp.series('watch') );

如果保存了我的style.scss文件，则终端输出将无限期继续...

C:\Workspace\mysite\gulp-dev>gulp  
[12:00:37] Using gulpfile  
C:\Workspace\mysite\gulp-dev\gulpfile.js   
[12:00:37] Starting 'default'...   
[12:00:37] Starting 'watch'...   
[Browsersync] Proxying: http://example.com   
[Browsersync] Access URLs:   
-----------------------------------  
       Local: http://localhost:81  
    External: http://example.com:81    
-----------------------------------  
          UI: http://localhost:3001    
UI External: http://example.com:3001    
-----------------------------------   
[12:00:48] Starting 'css'...   
[12:00:48] Finished 'css' after 117 ms   
[12:00:48] Starting 'css'...   
[12:00:48] Finished 'css' after 32 ms   
[12:00:48] Starting 'css'...   
[12:00:48] Finished 'css' after 55 ms   
[12:00:48] Starting 'css'...   
[12:00:48] Finished 'css' after 63 ms   
[12:00:49] Starting 'css'...   
[12:00:49] Finished 'css' after 26 ms

Answer 1

发生这种情况是因为您正在观看将css输出到的文件夹：

gulp.watch([root + '**/*.css'

.pipe(gulp.dest(root + '/dist/css/')

如果“ globstar” [**]仅在路径部分中，则它匹配零或更多目录和子目录搜索匹配项。

“ 和子目录”是吸引您的部分。因此，您的“ root/**/.css”包括“ root/dist/css”。每次触发“ css”任务时，它都会再次写入您正在查看的文件夹，因此该任务将被重新触发...等。这就是为什么您通常不关注src所在位置的整个根目录，然后将其写到其他位置的原因。

glob primer

为什么gulp watch连续输出开始\到终端

如果保存了我的style.scss文件，则终端输出将无限期继续...

1 个答案: